<script setup lang="ts">
import {Character, CharacterLabel} from "@/characters";
import {PencilSquareIcon} from "@heroicons/vue/24/outline";
import {CharacterRuleBook, useCharacterRuleBooksStore} from "@/rules";
import {routeNames} from "@/routes.ts";
import {SortableHeader, useSort} from "@/components/table";

type CharacterRuleBookView = {
  character: Character;
  characterName: string;
  ruleBookName: string;
}

const characterRuleBooksStore = useCharacterRuleBooksStore();

const { sortedArray, headerProps } = useSort<CharacterRuleBookView>(() => characterRuleBooksStore.characterRuleBooks.map((characterRuleBook: CharacterRuleBook): CharacterRuleBookView => ({
  character: characterRuleBook.character,
  characterName: characterRuleBook.character.name,
  ruleBookName: characterRuleBook.ruleBook.name
})))
</script>

<template>
  <div class="grid mb-2 mt-4">
    <table>
      <thead>
      <tr>
        <SortableHeader v-bind="headerProps" sortKey="characterName">Character</SortableHeader>
        <SortableHeader v-bind="headerProps" sortKey="ruleBookName">Rule Book</SortableHeader>
        <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
      </tr>
      </thead>
      <tbody>
      <tr v-for="characterRuleBookView in sortedArray" :key="characterRuleBookView.character.characterId" >
        <td>
          <CharacterLabel :character="characterRuleBookView.character" />
        </td>
        <td>{{characterRuleBookView.ruleBookName}}</td>
        <td class="text-right">
          <RouterLink class="btn-icon" :to="{ name: routeNames.editCharacterRulebook, params: { characterId: characterRuleBookView.character.characterId } }"><PencilSquareIcon /></RouterLink>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>