<template>
  <div>
    <div v-if="editedKeyboard !== null">
      <a title="Back to keyboards" href="#" v-on:click="editedKeyboard = null">
        ⏴
      </a>
      <input type="text" v-model="keyboardName" />
      <button type="button" v-on:click="updateKeyboardName">Save</button>
      <KeyboardConfiguration :keyboard-index="editedKeyboard" />
    </div>
    <div v-else-if="selectedKeyboard !== null">
      <a
        title="Back to keyboards"
        href="#"
        v-on:click="selectedKeyboard = null"
      >
        ⏴
      </a>
      <span>{{ keyboards[selectedKeyboard].name }}</span>
      <KeyboardDisplay :keyboard-index="selectedKeyboard" />
    </div>
    <div v-else>
      <strong>Keyboards manager</strong>
      <hr />
      <table class="keyboards">
        <thead>
          <tr>
            <th>Keyboard</th>
            <th>No. of keys</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(k, index) in keyboards" :key="index">
            <td>
              <a href="#" v-on:click="selectedKeyboard = index">{{ k.name }}</a>
            </td>
            <td>{{ k.characters.length }}</td>
            <td>
              <button type="button" v-on:click="editedKeyboard = index">
                Edit
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { mapState } from "vuex";
import KeyboardConfiguration from "./KeyboardConfiguration.vue";
import KeyboardDisplay from "./KeyboardDisplay.vue";

export default {
  components: {
    KeyboardConfiguration,
    KeyboardDisplay,
  },
  data: () => ({
    selectedKeyboard: null,
    editedKeyboard: null,
    keyboardName: null,
  }),
  computed: {
    ...mapState(["keyboards"]),
  },
  methods: {
    ...mapMutations(["updateName"]),
    updateKeyboardName() {
      this.updateName({
        index: this.editedKeyboard,
        name: this.keyboardName,
      });
    },
  },
  watch: {
    editedKeyboard() {
      if (this.editedKeyboard !== null)
        this.keyboardName = this.keyboards[this.editedKeyboard].name;
    },
  },
};
</script>

<style scoped>
table.keyboards,
table.keyboards th,
table.keyboards td {
  padding: 5px;
  border: 1px solid black;
  border-collapse: collapse;
}
</style>