<script setup lang="ts">
    /*eslint-disable*/
    import { ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import TimesheetApprovalEmployeeDetailsShifts from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue';
    import TimesheetApprovalEmployeeDetailsHoursWorkedChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue';
    import TimesheetApprovalEmployeeDetailsShiftTypesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue';
    import TimesheetApprovalEmployeeExpensesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue';
    import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
    import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
    import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';

    const props = defineProps<{
        isLoading: boolean;
        employeeName: string;
        employeeOverview: PayPeriodOverviewEmployee;
        employeeDetails: PayPeriodEmployeeDetails;
        currentPayPeriod: PayPeriod;
        updateKey: number;
    }>();

    const { t } = useI18n();
    const is_showing_graph = ref<boolean>(true);

    type shiftColor = {
        type: string;
        color: string;
        text_color?: string;
    }

    const shift_type_legend: shiftColor[] = [
        {
            type: t('shared.shift_type.regular'),
            color: 'secondary',
            text_color: '',
        },
        {
            type: t('shared.shift_type.evening'),
            color: 'warning',
        },
        {
            type: t('shared.shift_type.emergency'),
            color: 'amber-10',
        },
        {
            type: t('shared.shift_type.overtime'),
            color: 'negative',
        },
        {
            type: t('shared.shift_type.vacation'),
            color: 'purple-10',
        },
        {
            type: t('shared.shift_type.holiday'),
            color: 'purple-8',
        },
        {
            type: t('shared.shift_type.sick'),
            color: 'grey-8',
        },
    ]
</script>

<template>
    <q-card 
        class="q-pa-sm shadow-12 rounded-15 column no-wrap relative" 
        :style="$q.screen.lt.md ? '' : 'width: 60vw !important; height: 70vh !important;' "
    >
        <!-- loader -->
        <q-card-section 
            v-if="props.isLoading"
            class="absolute-center text-center"
        >
            <q-spinner 
                color="primary"
                size="5em"
                :thickness="10"
            />
            <div class="text-primary text-h6 text-weight-bold">
                {{ $t('shared.loading') }}
            </div>
        </q-card-section>
        
        <!-- employee name -->
        <q-card-section 
            v-if="!props.isLoading"
            class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
        >
            {{ props.employeeName }}
            
            <q-separator spaced size="2px" />
            <q-card-actions align="center" class="q-pa-none">     
                <q-card flat class="bg-secondary rounded-5 q-pa-xs">
                    <q-btn-toggle
                        color="white" 
                        text-color="primary" 
                        toggle-color="primary" 
                        v-model="is_showing_graph"
                        :options="[
                            {icon: 'bar_chart', value: true},
                            {icon: 'edit', value: false},
                        ]"
                    />
                </q-card>
            </q-card-actions>
        </q-card-section>
        
        <!-- employee timesheet details edit -->
        <q-card-section 
            v-if="!props.isLoading && !is_showing_graph"
            class="q-pa-none"
        >
            <!-- shift type color legend -->
            <q-card-section class="q-py-xs q-px-none text-center q-my-s">
                <q-badge
                    v-for="shift_type in shift_type_legend"
                    :color="shift_type.color"
                    :label="shift_type.type"
                    :text-color="shift_type.text_color || 'white'"
                    class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
                    style="width: 120px; font-size: 0.8em;"
                />
            </q-card-section>
            
            <!-- list of shifts, broken down into weekly columns -->
            <q-card-section 
                :horizontal="$q.screen.gt.sm"
                class="q-pa-none bg-secondary rounded-10"
            >
                <TimesheetApprovalEmployeeDetailsShifts 
                    :raw-data="props.employeeDetails"
                    :current-pay-period="props.currentPayPeriod"
                />
            </q-card-section>
        </q-card-section>
        
        <!-- employee timesheet details with graphs -->
        <q-card-section v-if="!props.isLoading && is_showing_graph" class="q-pa-md col column full-width no-wrap">
            <q-card-section :horizontal="!$q.screen.lt.md" class="q-pa-none col no-wrap" style="min-height: 300px;">
                <TimesheetApprovalEmployeeDetailsHoursWorkedChart
                    :raw-data="props.employeeDetails"
                    class="col-7"
                />
            
                <q-separator vertical spaced />

                <div class="column col justify-center no-wrap q-pa-none">
                    <TimesheetApprovalEmployeeDetailsShiftTypesChart
                        :raw-data="props.employeeOverview"
                        class="col-5"
                    />
                    
                    <q-separator :vertical="$q.screen.lt.md" spaced />
                    
                    <TimesheetApprovalEmployeeExpensesChart
                        :raw-data="props.employeeDetails"
                        class="col"
                    />
                    
                </div>
            </q-card-section>
        </q-card-section>
    </q-card>
</template>