<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'

const {
  standardBlessingItems,
  standardBlessingItemTotal,
  specialBlessingItems,
  specialBlessingItemsMinTotal,
  specialBlessingItemsMaxTotal,
  specialBlessingItemsAveTotal
} = storeToRefs(usePowerItems())
</script>

<template>
  <v-card>
    <v-card-title>Blessing Power</v-card-title>
    <v-card-text>
      <v-sheet class="d-flex flex-wrap flex-fill">
        <StandardItemsCard
          class="ma-2 align-self-start"
          :items="standardBlessingItems"
          :total="standardBlessingItemTotal"
        />
        <SpecialItemsCard
          class="ma-2 align-self-start"
          :items="specialBlessingItems"
          :minimum-total="specialBlessingItemsMinTotal"
          :maximum-total="specialBlessingItemsMaxTotal"
          :average-total="specialBlessingItemsAveTotal"
        />
        <SummaryCard
          class="ma-2 align-self-start"
          :standard-total="standardBlessingItemTotal"
          :minimum-total="specialBlessingItemsMinTotal"
          :maximum-total="specialBlessingItemsMaxTotal"
          :average-total="specialBlessingItemsAveTotal"
        />
      </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>
