<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 {
  standardIntimacyItems,
  standardIntimacyItemTotal,
  specialIntimacyItems,
  specialIntimacyItemsMinTotal,
  specialIntimacyItemsMaxTotal,
  specialIntimacyItemsAveTotal
} = storeToRefs(usePowerItems())

onBeforeMount(() => {
  if (standardIntimacyItems.value.keys().next().done) {
    usePowerItems().fetchIntimacyItems()
  }
  if (specialIntimacyItems.value.keys().next().done) {
    usePowerItems().fetchIntimacyItems()
  }
})
</script>

<template>
  <v-card class="flex-fill">
    <v-card-title>Intimacy Power</v-card-title>
    <v-card-text>
      <v-sheet class="d-flex flex-wrap flex-fill">
        <StandardItemsCard
          class="ma-2 align-self-start"
          :items="standardIntimacyItems"
          :total="standardIntimacyItemTotal"
        />
        <SpecialItemsCard
          class="ma-2 align-self-start"
          :items="specialIntimacyItems"
          :minimum-total="specialIntimacyItemsMinTotal"
          :maximum-total="specialIntimacyItemsMaxTotal"
          :average-total="specialIntimacyItemsAveTotal"
        />
        <SummaryCard
          item-type="Intimacy"
          class="ma-2 align-self-start"
          :standard-total="standardIntimacyItemTotal"
          :minimum-total="specialIntimacyItemsMinTotal"
          :maximum-total="specialIntimacyItemsMaxTotal"
          :average-total="specialIntimacyItemsAveTotal"
        />
      </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>
