<template>
  <table
    class="trials-table"
    v-bind:class="{
      solved: backendResponse.is_solved,
      error: !backendResponse.is_in_dictionary,
    }"
  >
    <tr v-for="trial in trials" :key="trial">
      <Trial
        :length="length"
        :trial="trial.text"
        :colors="trial.colors"
        :finished="true"
      />
    </tr>
    <tr>
      <Trial
        :length="length"
        :trial="currentTrial"
        :colors="[]"
        :finished="false"
      />
    </tr>
  </table>
</template>

<script setup lang="ts">
import Trial from "@/components/Trial.vue";
import { watch } from "vue";

let props = defineProps<{
  length: number;
  currentTrial: string;
  backendResponse: {
    trial: string;
    is_in_dictionary: boolean;
    is_solved: boolean;
    colors: number[];
  };
}>();
let trials: { text: string; colors: number[] }[] = [];

watch(
  () => props.backendResponse,
  (response) => {
    if (!response.is_in_dictionary) {
      console.log("word not in dictionary");
      return;
    }
    if (response.is_solved) {
      console.log("You won!");
      return;
    }
    trials = trials.concat([
      {
        // TODO: fix capitalization of "ß" -> "S"
        text: props.backendResponse.trial.toUpperCase(),
        colors: props.backendResponse.colors,
      },
    ]);
    console.log(trials);
    console.log(JSON.stringify(response));
  }
);
</script>

<style scoped>
.trials-table {
  background-color: #000000;
  color: #a0a0a0;
  font-weight: bold;
  font-family: monospace;
}
.trials-table.error {
  background-color: #800000;
}
.trials-table.solved {
  background-color: #008000;
}
</style>
