<script setup lang="ts">
import { useBoardGameStore } from '@/modules/5s/board-game-store'
import { shuffleArray } from '@/utils'
import { computed } from 'vue'

const boardGameStore = useBoardGameStore()

const isSeiriActivated = computed(() => boardGameStore.sUsed.includes('seiri'))
const isSeitonActivated = computed(() =>
  boardGameStore.sUsed.includes('seiton')
)
// const isSeisoActivated = computed(() => boardGameStore.sUsed.includes('seiso'))

const neededTools = computed(
  () =>
    new Set(
      boardGameStore.boardGames
        .flatMap((g) => g.parts)
        .flatMap((p) => p.tasks)
        .flatMap((t) => t.tools)
        .map((t) => t.id)
    )
)

const tools = computed(() => {
  const toolsToUse = isSeiriActivated.value
    ? boardGameStore.tools.filter((t) => neededTools.value.has(t.id))
    : boardGameStore.tools

  return isSeitonActivated.value
    ? [...toolsToUse].sort(
        (a, b) =>
          (boardGameStore.countUsedTools[b.id] || 0) -
          (boardGameStore.countUsedTools[a.id] || 0)
      )
    : toolsToUse
})

const toolsToDisplay = computed(() =>
  shuffleArray(tools.value.map((t) => `${t.name} (ref: ${t.reference})`)).join(
    ', '
  )
)
</script>

<template>
  <div class="board-game-tools prose">
    <div class="overflow-x-auto" v-if="isSeitonActivated">
      <table class="table table-md">
        <thead>
          <tr>
            <th>Tool</th>
            <th>Reference</th>
            <th>Used</th>
          </tr>
        </thead>
        <transition-group name="list" tag="tbody">
          <tr v-for="tool in tools" :key="tool.reference">
            <td>{{ tool.name }}</td>
            <td class="numeric">{{ tool.reference }}</td>
            <td class="numeric count">
              {{ boardGameStore.countUsedTools[tool.id] }}
            </td>
          </tr>
        </transition-group>
      </table>
    </div>
    <div v-else>
      {{ toolsToDisplay }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.board-game-tools {
  .count {
    text-align: right;
  }

  .list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
  }

  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
}
</style>
