<script
    setup
    lang="ts"
>
    import type { TimesheetApprovalOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';

    const modelApproval = defineModel<boolean>();

    const { row } = defineProps<{
        row: TimesheetApprovalOverview;
    }>();

    const emit = defineEmits<{
        'clickDetails': [overview: TimesheetApprovalOverview];
        'clickApprovalAll': [is_approved: boolean];
    }>();
</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="`opacity: ${row.is_active ? '1' : '0.75'}; transform: scale(${row.is_active ? '1' : '0.9'})`"
            >
                <!-- Card header with employee name and details button-->
                <q-card-section
                    horizontal
                    class="q-py-xs q-px-sm q-ma-none justify-between items-center bg-primary text-white"
                >
                    <div>
                        <span
                            class="text-h5 text-uppercase text-weight-medium q-mr-xs"
                            :class="row.is_active ? 'text-accent' : 'text-negative'"
                        >
                            {{ row.employee_first_name }}
                        </span>
                        <span class="text-uppercase text-weight-light">{{ row.employee_last_name }}</span>
                    </div>

                    <!-- Buttons to view detailed shifts or view employee timesheet -->
                    <q-btn
                        dense
                        square
                        unelevated
                        class="col-auto q-ma-none rounded-5"
                        color="accent"
                        icon="las la-chart-pie"
                        @click="emit('clickDetails', row)"
                    >
                        <q-tooltip
                            anchor="top middle"
                            self="center middle"
                            :offset="[0, 20]"
                            class="bg-accent text-uppercase text-weight-bold"
                        >
                            {{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
                        </q-tooltip>

                        <q-icon
                            name="las la-chart-bar"
                            color="white"
                        />
                    </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 || !row.is_active ? 'text-negative' : 'text-accent'"
                                > {{
                                    $t('shared.shift_type.regular') }} </span>
                                <span
                                    class="text-weight-bolder text-h4 q-py-none"
                                    :class="row.regular_hours > 80 || !row.is_active ? 'text-negative' : ''"
                                > {{ getHoursMinutesStringFromHoursFloat(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 order-last' : 'order-first'"
                                >
                                    <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;"
                                    >
                                        {{ getHoursMinutesStringFromHoursFloat(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
                    class="justify-between items-center q-pa-none"
                    :class="row.is_active ? (row.is_approved ? 'text-white bg-accent' : 'bg-dark') : 'bg-transparent'"
                >
                    <!-- weekly totals -->
                    <q-separator />
                    <div
                        v-if="row.is_active"
                        class="col row full-width justify-between"
                    >
                        <div
                            v-for="weekly_hours, index in row.weekly_hours"
                            :key="index"
                            class="col q-px-sm text-uppercase"
                        >
                            <span class="text-weight-bold">
                                {{ $t('timesheet.week') }} {{ index + 1 }}
                            </span>

                            <span
                                class="q-ml-sm"
                                :class="row.total_hours > 80 ? 'bg-negative q-px-sm rounded-5 text-white' : ''"
                            >
                                {{ getHoursMinutesStringFromHoursFloat(weekly_hours) }}
                            </span>
                        </div>
                    </div>
                    <q-separator />

                    <!-- overall totals and approve all button -->
                    <div
                        v-if="row.is_active"
                        class="col row full-width"
                    >
                        <div class="col text-uppercase">
                            <span class="text-h6 q-ml-sm text-weight-bolder">Total</span>
                            <span
                                class="q-ml-sm text-h6"
                                :class="row.total_hours > 80 ? 'bg-negative q-px-sm rounded-5 text-white' : 'text-weight-light'"
                            >
                                {{ getHoursMinutesStringFromHoursFloat(row.total_hours) }}
                            </span>
                        </div>

                        <div class="col-auto q-py-xs q-px-md">
                            <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'"
                                @update:model-value="value => $emit('clickApprovalAll', value)"
                            >
                                <q-tooltip
                                    anchor="top middle"
                                    self="center middle"
                                    :offset="[0, 20]"
                                    class="bg-accent text-uppercase text-weight-bold"
                                >
                                    {{ row.is_approved ? $t('timesheet_approvals.tooltip.unapprove') :
                                        $t('timesheet_approvals.tooltip.approve') }}
                                </q-tooltip>
                            </q-checkbox>
                        </div>
                    </div>

                    <div
                        v-else
                        class="col row flex-center q-px-sm full-width"
                    >
                        <q-icon
                            name="block"
                            color="negative"
                            class="col-auto"
                            size="lg"
                        />

                        <span class="col q-pl-sm text-uppercase text-weight-bold text-h5">
                            {{ $t('timesheet_approvals.table.inactive') }}
                        </span>
                    </div>
                </q-card-section>
            </q-card>
        </transition>
    </div>
</template>