<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import type { PowerItem } from '@/types/PowerItem'
import type { Ref } from 'vue';
import { computed, ref } from 'vue'
import { useDisplay } from 'vuetify';
import type { VDataTable } from 'vuetify/components';

type ReadonlyHeaders = VDataTable['headers']
type SortItem = { key: string; order?: boolean | 'asc' | 'desc' }
const { lgAndUp } = useDisplay()

export interface Props {
  items: Map<string, PowerItem>
  total: number
}

const props = withDefaults(defineProps<Props>(), {
  items: () => new Map<string, PowerItem>()
})

const headers = computed((): ReadonlyHeaders => {
  const initialHeaders = [
    {
      title: '',
      align: 'start',
      sortable: false,
      value: '1.iconURL'
    },
    {
      title: 'Owned',
      align: 'end',
      sortable: true,
      key: `1.owned`
    },
    {
      title: 'Total',
      align: 'end',
      sortable: false,
      key: `1.totalPower`
    }
  ]
  if (lgAndUp.value) {
    initialHeaders!.splice(1, 0, 
    {
      title: 'Name',
      align: 'start',
      sortable: true,
      value: '1.itemName'
    })
    initialHeaders!.splice(2, 0, 
    {
      title: 'Power',
      align: 'end',
      sortable: true,
      key: '1.minItemPower'
    })
  }
  return initialHeaders as ReadonlyHeaders
})
const sortBy: Ref<SortItem[]> = ref([
  {
    key: '1.minItemPower',
    order: 'asc'
  }
])

const getColor = computed(() => (rarity: number): string => {
  if (rarity === 5) {
    return 'red'
  } else if (rarity === 4) {
    return 'amber'
  } else if (rarity === 3) {
    return 'purple'
  } else if (rarity === 2) {
    return 'blue'
  } else {
    return 'green'
  }
})
const isLoading = computed((): boolean => props.items.keys()?.next().done ?? false)
</script>

<template>
  <v-card :loading="isLoading">
    <v-card-title>Standard Items</v-card-title>
    <v-card-subtitle>Items that exist all the time</v-card-subtitle>
    <v-card-item>
      <v-data-table
        density="compact"
        v-model:sort-by="sortBy"
        :items="[...items.entries()]"
        :headers="headers"
      >
        <template v-slot:[`item.1.iconURL`]="{ item }">
          <v-card class="my-2" elevation="2" rounded width="41">
            <v-tooltip
              activator="parent"
              v-if="item[1].tooltip != undefined"
              content-class="custom-tooltip"
            >
              <v-card variant="text" density="compact" max-width="25vw">
                <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
                <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{
                  item[1].tooltip
                }}</v-card-text>
              </v-card>
            </v-tooltip>
            <v-img :src="`/images/${item[1].iconURL}`" height="41" width="41" cover></v-img>
          </v-card>
        </template>
        <template v-slot:[`item.1.itemName`]="{ item }">
          <v-tooltip
            activator="parent"
            v-if="item[1].tooltip != undefined"
            content-class="custom-tooltip"
          >
            <v-card variant="text" density="compact" max-width="25vw">
              <v-card-title class="px-2">Origin: {{ item[1].origin }}</v-card-title>
              <v-card-text class="px-2" v-if="item[1].tooltip !== ''">{{
                item[1].tooltip
              }}</v-card-text>
            </v-card>
          </v-tooltip>
          <v-chip :color="`${getColor(item[1].rarity)}`">
            {{ item[1].itemName }}
          </v-chip>
        </template>
        <template v-slot:[`item.1.owned`]="{ item }">
          <v-text-field
            density="compact"
            hide-details="auto"
            v-model.number="item[1].owned"
            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
          ></v-text-field>
        </template>
        <template v-slot:[`item.1.totalPower`]="{ item }">
          {{ item[1].minItemPower * item[1].owned }}
        </template>
        <template v-slot:tfoot>
          <tfoot>
            <tr>
              <td></td>
              <td class="d-none d-lg-table-cell"></td>
              <td></td>
              <td></td>
              <td class="px-0 text-right font-weight-bold">{{ total }}</td>
            </tr>
          </tfoot>
        </template>
      </v-data-table>
    </v-card-item>
  </v-card>
</template>

<style lang="scss" scoped>
:global(.custom-tooltip) {
  padding: 0 !important;
}
</style>
