<script lang="ts" setup>
import YrhButton from '@/components/atoms/YrhButton.vue'

import type { GameItem } from '@/models/YrhGameItem'
import { useItemStore } from '@/stores/datas/itemStore'
import { storeToRefs } from 'pinia'

const { currentItem } = storeToRefs(useItemStore())

const props = defineProps<{
  items: GameItem[]
}>()

function handleSelectedItem(item: GameItem) {
  currentItem.value = item
}
</script>

<template>
  <div class="h-full relative pl-6">
    <menu
      class="h-[calc(100%-16px)] overflow-auto py-2 bg-y-beige-300 max-h-full shadow-sharpest y-scrollbar after:-top-2 after:-bottom-2 after:w-4"
    >
      <li v-for="item in props.items" :key="item.name" class="mb-2 last:mb-0">
        <YrhButton
          no-bg
          :has-arrow="item.name === currentItem?.name ? 'force' : true"
          @clicked="handleSelectedItem(item)"
          :is-active="item.name === currentItem?.name"
        >
          <span class="flex justify-between w-full">
            <span class="flex items-center">
              <span v-if="item.category">
                <img
                  :src="`/images/item-${item.category}-icon.png`"
                  class="pr-2"
                  height="24"
                  width="24"
                  alt=""
                />
              </span>
              <span>{{ item.name }}</span>
            </span>
            <span v-if="item.numberHeld" class="px-1 font-medium">{{ item.numberHeld }}</span>
          </span>
        </YrhButton>
      </li>
    </menu>
  </div>
</template>

<style lang="scss" scoped>
menu {
  &::before {
    display: block;
    position: absolute;
    left: 0;
    content: '';
    border-left-width: 8px;
    border-right-width: 2px;
    border-color: var(--color-y-beige-900);
    opacity: 0.25;
  }
}
</style>
