<template>
  <div class="dashboard">
    <div class="card-row">
      <CardTop :icon="mdiCalendar" label="Dni pracujących" :data="attendanceStore.workingDays" />
      <CardTop :icon="mdiTent" label="Dni urlopowych" :data="attendanceStore.holidayCount" />
      <CardTop :icon="mdiNeedle" label="Dni chorobowych" :data="attendanceStore.sickCount" />
      <CardTop
        :icon="mdiTimerAlertOutline"
        label="Dni nieobecnych"
        :data="attendanceStore.leaveDayCount"
      />
      <CardTop
        :icon="mdiClockOutline"
        label="Godzin w miesiącu"
        :data="attendanceStore.workingHours"
      />
    </div>

    <HoursSummary v-bind="summary" />

    <div class="card">
      <div class="card-header">
        <h3>Wykres godzin</h3>
      </div>
      <div class="chart-container">
        <BarChart v-if="attendanceStore.days.length > 0" :dataset="attendanceStore.days" />
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <h3>Tabela godzin</h3>
      </div>
      <div class="list list-header">
        <span class="list-grid-dayOfMonth">Dzień</span>
        <span class="list-grid-dayOfWeek">Dzień tygodnia</span>
        <span class="list-grid-enter">Wejscie</span>
        <span class="list-grid-exit">Wyjscie</span>
        <span class="list-grid-alert">Alert</span>
        <span class="list-grid-holiday">Urlop</span>
        <span class="list-grid-sickday">Chorobowe</span>
        <span class="list-grid-worked">Czas pracy</span>
        <span class="list-grid-overtime">Bilans dzienny</span>
        <span class="list-grid-hours">Suma godzin</span>
        <span class="list-grid-balance">Bilans ogólny</span>
      </div>
      <div class="list-body">
        <DayRow v-for="(_, index) in attendanceStore.days" :key="index" :index="index" />
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script setup>
import { onMounted, computed, ref } from 'vue'
import { useAttendanceStore } from '@/stores/attendanceStore'
import { mdiCalendar, mdiTent, mdiNeedle, mdiClockOutline, mdiTimerAlertOutline } from '@mdi/js'
import { getData } from '@/api/dataApi'
import CardTop from '@/components/CardTop.vue'
import HoursSummary from '@/components/HoursSummary.vue'
import BarChart from '@/components/BarChart.vue'
import DayRow from '@/components/DayRow.vue'
// import MockApi from '@/api/mock_response.js'

const attendanceStore = useAttendanceStore()

const loading = ref(false)
const error = ref('')

const summary = computed(() => ({
  sum_of_hours: attendanceStore.sumOfHours,
  overtime_hours: attendanceStore.overtimeHours,
  working_hours: attendanceStore.workedHours,
  holiday_hours: attendanceStore.holidayHours,
  sick_hours: attendanceStore.sickHours,
  to_go_hours: attendanceStore.toGoHours,
}))

const input = ref('')
onMounted(async () => {
  loading.value = true
  const currentDate = new Date()
  try {
    const response = await getData(currentDate.getFullYear(), currentDate.getMonth() + 1)
    input.value = response
    attendanceStore.loadFromResponse(response)
  } catch (err) {
    error.value = err
  } finally {
    loading.value = false
  }
})
</script>
<style scoped></style>
