<script setup lang="ts">
    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';

    type TableColumn = {
        name: string;
        label: string;
        value: unknown;
    };

    const { cols, row, initialState } = defineProps<{
        cols: TableColumn[];
        row: PayPeriodOverviewEmployee;
        initialState: boolean;
    }>();
    
    const emit = defineEmits<{
        clickDetails: [ email: string ];
        updateApproval: [ value: boolean ];
    }>();
</script>

<template>
    <div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
        <q-card class="rounded-10">
            <!-- Card header with employee name and details button-->
            <q-card-section 
                horizontal 
                class="q-py-none q-pl-md relative"
            >
                <div class="text-primary text-h5 text-weight-bolder q-pt-xs overflow-hidden">
                    {{ row.employee_name }}
                </div>

                <q-space />

                <!-- Buttons to view detailed shifts or view employee timesheet -->
                <q-btn
                    flat
                    dense
                    square
                    unelevated
                    class="q-py-none q-my-xs"
                    color="primary"
                    icon="work_history"
                    @click="emit('clickDetails', row.email)"
                >
                    <q-tooltip 
                        anchor="top middle"
                        self="center middle" 
                        class="bg-primary text-uppercase text-weight-bold"
                    >
                        {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
                    </q-tooltip>
                </q-btn>
            </q-card-section>

            <q-separator size="2px" />
            
            <!-- Main body of pay period card -->
            <q-card-section class="q-pa-none q-mt-xs q-mb-sm">
                <div class="row no-wrap">
                    <!-- left portion of pay period card -->
                    <div 
                        class="column no-wrap" 
                        :class="$q.screen.lt.md ? 'col' : 'col-8'"
                    >
                        <!-- Regular hours segment -->
                        <q-item 
                            dense 
                            class="column" 
                            :class="$q.screen.lt.md ? 'col' : 'col-8'"
                        >
                            <q-item-label class="text-weight-bold text-primary q-pa-none text-uppercase text-caption">
                                {{ cols.find(c => c.name === 'regular_hours')?.label }}
                            </q-item-label>
                            <q-item-label class="text-weight-bolder text-h3 q-py-none">
                                {{ cols.find(c => c.name === 'regular_hours')?.value }}
                            </q-item-label>
                        </q-item>

                        <q-separator class="q-mx-sm" />

                        <!-- Other hour types segment -->
                        <div :class="$q.screen.lt.md ? 'column' : 'row no-wrap'">
                            <q-item 
                                dense 
                                class="column ellipsis " 
                                v-for="col in cols.slice(3, 6)" 
                                :key="col.label"
                            >
                                <q-item-label 
                                    class="text-weight-bold text-primary q-pa-none text-uppercase text-caption" 
                                    style="font-size: 0.65em;"
                                >
                                    {{ col.label }}
                                </q-item-label>
                                <q-item-label class="text-weight-bolder q-pa-none text-h6 ">
                                    {{ col.value }}
                                </q-item-label>
                            </q-item>
                        </div>
                    </div>
                    
                    <q-separator
                        vertical 
                        class="q-mt-xs q-mb-none"
                    />
                    
                    <!-- Right portion of pay period card -->
                    <div class="no-wrap ellipsis col">
                        <q-item 
                            dense 
                            class="column" 
                            v-for="col in cols.slice(6, )" 
                            :key="col.label"
                        >
                            <q-item-label 
                                class="text-weight-bold text-primary q-pa-none text-uppercase text-caption ellipsis" 
                                style="font-size: 0.8em;"
                            >
                                {{ col.label }}
                            </q-item-label>
                            <q-item-label class="text-weight-bolder q-pa-none text-h6 ">
                                {{ col.value }}
                            </q-item-label>
                        </q-item>
                    </div>
                </div>
            </q-card-section>

            <q-separator 
                color="primary" 
                style="height: 2px;" 
            />
            
            <!-- Validate entire Pay Period section -->
            <q-card-section 
                horizontal 
                class="q-pa-sm text-weight-bold"
                :class="initialState ? 'text-white bg-primary' : 'bg-dark'"
            >
                <q-item-label class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours + ' h' }} </q-item-label>
                <q-item-label class="text-uppercase text-weight-bold q-ml-xs"> total </q-item-label>
                <q-space />
                <q-checkbox 
                    dense 
                    left-label
                    size="lg" 
                    checked-icon="lock" 
                    unchecked-icon="lock_open" 
                    :color="initialState ? 'white' : 'primary'" keep-color 
                    :model-value="initialState"
                    @update:model-value="val => emit('updateApproval', val)"
                    :label="initialState ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')" 
                    class="text-uppercase"
                />
            </q-card-section>
        </q-card>
    </div>
</template>