<script
    setup
    lang="ts"
>
    import type { TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';

    const modelApproval = defineModel<boolean>();

    const { row, index = 0 } = defineProps<{
        row: TimesheetOverview;
        index?: number;
    }>();

    const emit = defineEmits<{
        'clickDetails': [overview: TimesheetOverview];
    }>();
</script>

<template>
    <div class="q-px-sm q-pb-md col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
        <transition
            appear
            enter-active-class="animated fadeInUp"
        >
            <q-card
                class="rounded-10 shadow-5"
                :style="`animation-delay: ${index / 15}s;`"
            >
                <!-- Card header with employee name and details button-->
                <q-card-section
                    horizontal
                    class="q-py-none q-px-sm q-ma-none justify-between items-center bg-primary text-white"
                >
                    <div>
                        <span class="text-h5 text-uppercase text-weight-medium text-accent q-mr-xs">{{ row.employee_name.split(' ')[0]
                            }}</span>
                        <span class="text-uppercase text-weight-light">{{ row.employee_name.split(' ')[1] }}</span>
                    </div>

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

                <!-- Main body of pay period card -->
                <q-card-section class="q-py-none q-px-sm q-py-sm bg-dark">
                    <div class="row">
                        <!-- left portion of pay period card -->
                        <div class="col column q-px-sm">
                            <!-- Regular hours segment -->
                            <div class="col column">
                                <span
                                    class="text-weight-bold text-uppercase q-pa-none q-my-none"
                                    :class="row.regular_hours > 80 ? 'text-negative' : 'text-accent'"
                                > {{
                                    $t('shared.shift_type.regular') }} </span>
                                <span
                                    class="text-weight-bolder text-h3 q-py-none"
                                    :class="row.regular_hours > 80 ? 'text-negative' : ''"
                                > {{ row.regular_hours }} </span>
                                <q-separator class="q-mr-sm" />
                            </div>

                            <!-- Other hour types segment -->
                            <div class="col-auto row ellipsis q-mt-xs">
                                <div
                                    v-for="hour_type, index in row.other_hours"
                                    :key="index"
                                    class="col-4 column ellipsis"
                                    :class="hour_type === 0 ? 'invisible' : ''"
                                >
                                    <span
                                        class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
                                        style="font-size: 0.7em;"
                                    > {{ $t(`shared.shift_type.${index.replace('_hours', '')}`) }} </span>
                                    <span
                                        class="text-weight-bolder q-pa-none q-mb-xs"
                                        style="font-size: 1.2em; line-height: 1em;"
                                    > {{ hour_type }} </span>
                                </div>
                            </div>
                        </div>

                        <q-separator
                            vertical
                            class="q-mt-xs q-mb-none"
                        />

                        <!-- Right portion of pay period card -->
                        <div class="col-auto column q-px-sm">
                            <div class="col column no-wrap">
                                <span
                                    class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
                                    style="font-size: 0.8em;"
                                > {{ $t('timesheet.expense.types.EXPENSES') }} </span>
                                <span
                                    class="text-weight-bolder text-h6 q-pa-none"
                                    style="line-height: 0.9em;"
                                > {{ row.expenses }} <span class="text-weight-light">$</span> </span>
                            </div>

                            <div class="col column no-wrap">
                                <span
                                    class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
                                    style="font-size: 0.8em;"
                                > {{ $t('timesheet.expense.types.MILEAGE') }} </span>
                                <span
                                    class="text-weight-bolder text-h6 q-pa-none"
                                    style="line-height: 0.9em;"
                                > {{ row.mileage }} <span class="text-weight-light text-body2">km</span></span>
                            </div>
                        </div>
                    </div>
                </q-card-section>

                <!-- Validate Pay Period section -->
                <q-card-section
                    horizontal
                    class="justify-between items-center text-weight-bold q-pa-none"
                    :class="row.is_approved ? 'text-white bg-accent' : 'bg-dark text-accent'"
                >
                    <div class="col-auto">
                        <span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }} </span>
                        <span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
                    </div>

                    <div
                        class="col-auto q-py-xs q-px-md"
                        style="border: 1px solid var(--q-accent);"
                    >
                        <q-checkbox
                            v-model="modelApproval"
                            dense
                            left-label
                            keep-color
                            size="lg"
                            checked-icon="lock"
                            unchecked-icon="lock_open"
                            :color="row.is_approved ? 'white' : 'accent'"
                            :label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
                            class="text-uppercase"
                            :class="row.is_approved ? '' : 'text-accent'"
                        />
                    </div>
                </q-card-section>
            </q-card>
        </transition>
    </div>
</template>