<script setup lang="ts">
    import { ref } from 'vue';

    import DetailedShiftList from 'src/modules/timesheet-approval/components/detailed-shift-list.vue';
    import DetailedChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
    import DetailedChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
    import DetailedChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
    import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
    import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
    import { shift_type_legend } from 'src/modules/timesheet-approval/types/detailed-shift-color';
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    const dialog_model = defineModel<boolean>('dialog', { default: false });

    defineProps<{
        isLoading: boolean;
        employeeOverview: PayPeriodEmployeeOverview;
        employeeDetails: PayPeriodEmployeeDetails;
    }>();

    const timesheet_store = useTimesheetStore();
    const is_showing_graph = ref<boolean>(true);
</script>

<template>
    <q-dialog 
        v-model="dialog_model" 
        full-width
        transition-show="jump-down" 
        transition-hide="jump-down"
    >
        <q-card 
            class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
            :style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
        >
            <!-- loader -->
            <q-card-section 
                v-if="isLoading" 
                class="column flex-center text-center"
            >
                <q-spinner 
                    color="primary" 
                    size="5em" 
                    :thickness="10" 
                    class="col-auto"
                />
                <div class="col-auto text-primary text-h6 text-weight-bold text-center ">
                    {{ $t('shared.loading') }}
                </div>
            </q-card-section>

            <!-- employee name -->
            <q-card-section 
                v-if="!isLoading"
                class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
            >
                <span> {{ employeeDetails.employee_full_name }} </span>

                <q-separator 
                    spaced 
                    size="2px" 
                />
                
                <q-card-actions 
                    align="center" 
                    class="q-pa-none"
                >
                    <q-btn-toggle 
                        v-model="is_showing_graph" 
                        color="white" 
                        text-color="primary" 
                        toggle-color="primary"
                        :options="[
                            { icon: 'bar_chart', value: true },
                            { icon: 'edit', value: false },
                        ]"
                    />
                </q-card-actions>
            </q-card-section>

            <!-- employee timesheet details edit -->
            <q-card-section 
                v-if="!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, index in shift_type_legend"
                        :key="index"
                        :color="shift_type.background_color" 
                        :label="$t(shift_type.type_label)"
                        :text-color="shift_type.font_color"
                        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"
                >
                    <DetailedShiftList 
                        :raw-data="employeeDetails"
                        :current-pay-period="timesheet_store.pay_period" 
                    />
                </q-card-section>
            </q-card-section>

            <!-- employee timesheet details with chart -->
            <q-card-section 
                v-if="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;"
                >
                    <DetailedChartHoursWorked 
                        :raw-data="employeeDetails" 
                        class="col-7" 
                    />

                    <q-separator 
                        spaced 
                        :vertical="!$q.screen.lt.md" 
                    />

                    <div class="column col justify-center no-wrap q-pa-none">
                        <DetailedChartShiftTypes 
                            :raw-data="employeeOverview" 
                            class="col-5" 
                        />

                        <q-separator 
                            spaced 
                            :vertical="!$q.screen.lt.md" 
                        />

                        <DetailedChartExpenses 
                            :raw-data="employeeDetails" 
                            class="col" 
                        />
                    </div>
                </q-card-section>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>