<script setup lang="ts">
import SpecialItemsCard from '@/components/SpecialItemsCard.vue'
import StandardItemsCard from '@/components/StandardItemsCard.vue'
import SummaryCard from '@/components/SummaryCard.vue'
import { storeToRefs } from 'pinia'
import { usePowerItems } from '@/stores/powerItems'
import { onBeforeMount } from 'vue'

const {
  standardFellowItems,
  standardFellowItemTotal,
  specialFellowItems,
  specialFellowItemsMinTotal,
  specialFellowItemsMaxTotal,
  specialFellowItemsAveTotal
} = storeToRefs(usePowerItems())

onBeforeMount(() => {
  if (standardFellowItems.value.keys().next().done) {
    usePowerItems().fetchFellowItems()
  }
  if (specialFellowItems.value.keys().next().done) {
    usePowerItems().fetchFellowItems()
  }
})
</script>

<template>
  <v-card class="flex-fill">
    <v-card-title>Fellow Power</v-card-title>
    <v-card-text>
      <v-sheet class="d-flex flex-wrap flex-fill">
        <StandardItemsCard
          class="ma-2 align-self-start"
          :items="standardFellowItems"
          :total="standardFellowItemTotal"
        />
        <SpecialItemsCard
          class="ma-2 align-self-start"
          :items="specialFellowItems"
          :minimum-total="specialFellowItemsMinTotal"
          :maximum-total="specialFellowItemsMaxTotal"
          :average-total="specialFellowItemsAveTotal"
        />
        <SummaryCard
          item-type="Fellow"
          class="ma-2 align-self-start"
          :standard-total="standardFellowItemTotal"
          :minimum-total="specialFellowItemsMinTotal"
          :maximum-total="specialFellowItemsMaxTotal"
          :average-total="specialFellowItemsAveTotal"
        />
      </v-sheet>
    </v-card-text>
  </v-card>
</template>

<style lang="scss" scoped>
@use '@/styles/settings.scss';
:deep(tbody) tr:nth-of-type(even) {
  background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
}
</style>
