<script
    setup
    lang="ts"
>
    /* eslint-disable */
    import { provide, ref } from 'vue';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import DetailsDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue';
    import DetailsDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue';
    import DetailsDialogChartExpenses from 'src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue';
    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
    import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';

    const { employeeEmail } = defineProps<{
        employeeEmail: string;
    }>();

    const dialog_model = defineModel<boolean>('dialog', { default: false });
    const timesheet_store = useTimesheetStore();
    const render_key = ref(1);

    provide('employeeEmail', employeeEmail);
</script>

<template>
    <q-dialog
        v-model="dialog_model"
        full-width
        full-height
        transition-show="jump-down"
        transition-hide="jump-down"
        @show="render_key += 1"
    >
        <q-card
            class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
            :style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
        >

            <!-- employee name -->
            <q-card-section
                class="text-h5 text-weight-bolder text-center bg-primary q-pa-none text-uppercase text-white col-auto"
            >
                <span>TODO: Name goes here</span>
            </q-card-section>

            <!-- employee pay period details using chart -->
            <q-card-section
                :horizontal="!$q.screen.lt.md"
                class=" col-auto q-px-sm no-wrap"
            >
                <DetailsDialogChartHoursWorked
                    :key="render_key"
                    class="col"
                />

                <DetailsDialogChartShiftTypes
                    :key="render_key + 1"
                    class="col-2 q-ma-lg"
                />

                <DetailsDialogChartExpenses
                    :key="render_key + 2"
                    class="col"
                />
            </q-card-section>

            <q-card-section class="col-auto">
                <q-separator />
                <ExpenseDialogList
                    horizontal
                    :employee-email="employeeEmail"
                />
                <q-separator />
            </q-card-section>

            <!-- list of shifts -->
            <q-card-section
                :horizontal="$q.screen.gt.sm"
                class="col-auto q-px-sm rounded-5 no-wrap"
            >
                <TimesheetWrapper
                    dense
                    :employee-email="employeeEmail"
                />
            </q-card-section>
        </q-card>
    </q-dialog>
</template>