<script setup lang="ts">
    /* eslint-disable */
    import { ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import type { PayPeriodEmployeeOverview } from '../types/timesheet-approval-pay-period-employee-overview-interface';
    import type { QTableColumn } from 'quasar';

    const { t } = useI18n();

    const columns: QTableColumn<PayPeriodEmployeeOverview>[] = [
        { name: 'employee_name', label: t('tableColumnLabelFullname'), field: 'employee_name', sortable: true },
        { name: 'regular_hours', label: t('tableColumnLabelRegularHours'), field: 'regular_hours', sortable: true },
        { name: 'evening_hours', label: t('tableColumnLabelEveningHours'), field: 'evening_hours' },
        { name: 'emergency_hours', label: t('tableColumnLabelEmergencyHours'), field: 'emergency_hours' },
        { name: 'overtime_hours', label: t('tableColumnLabelOvertimeHours'), field: 'overtime_hours' },
        { name: 'expenses', label: t('tableColumnLabelExpenses'), field: 'expenses', sortable: true },
        { name: 'mileage', label: t('tableColumnLabelMileage'), field: 'mileage', sortable: true }
    ]

    const filter = ref('');
    const selected = ref([]);

    const props = defineProps<{
        rows: PayPeriodEmployeeOverview[];
    }>();
</script>


<template>
  <div class="q-pa-md">
    <q-table
      :title="$t('timeSheetValidations.tableHeader')"
      :rows="rows"
      :columns="columns"
      row-key="name"
      selection="multiple"
      v-model:selected="selected"
      :filter="filter"
      grid
      hide-header
    >
      <template v-slot:top-right>
        <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>

      <template v-slot:item="props: { cols: (QTableColumn<PayPeriodEmployeeOverview> & { value: unknown })[], row: PayPeriodEmployeeOverview, selected: boolean }">
        <div
          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
          :style="props.selected ? 'transform: scale(0.95);' : ''"
        >
          <q-card>
            <q-card-section>
              <q-checkbox dense v-model="props.selected" :label="props.row.is_approved ? $t('timeSheetValidations.timeSheetStatusVerified') : $t('timeSheetValidations.timeSheetStatusUnverified')" />
            </q-card-section>
            <q-separator />
            <q-list dense>
              <q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name">
                <q-item-section>
                  <q-item-label>{{ col.label }}</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-item-label caption>{{ col.value }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div>
      </template>

    </q-table>
  </div>
</template>
