<template>
  <div>
    <div v-if="editedKeyboard">
      <a title="Back to keyboards" href="#" v-on:click="editedKeyboard = null">
        ⏴
      </a>
      <span>{{ editedKeyboard.name }}</span>
      <KeyboardConfiguration :keyboard="editedKeyboard" />
    </div>
    <div v-else-if="selectedKeyboard">
      <a
        title="Back to keyboards"
        href="#"
        v-on:click="selectedKeyboard = null"
      >
        ⏴
      </a>
      <span>{{ selectedKeyboard.name }}</span>
      <KeyboardDisplay :keyboard="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 in keyboards" :key="k.name">
            <td>
              <a href="#" v-on:click="selectedKeyboard = k">{{ k.name }}</a>
            </td>
            <td>{{ k.characters.length }}</td>
            <td>
              <button type="button" v-on:click="editedKeyboard = k">
                Edit
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

export default {
  components: {
    KeyboardConfiguration,
    KeyboardDisplay,
  },
  data: () => ({
    selectedKeyboard: null,
    editedKeyboard: null,
  }),
  computed: {
    ...mapState(["keyboards"]),
  },
};
</script>

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