<script
    setup
    lang="ts"
>
    /* eslint-disable */
    import { 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 timesheet_store = useTimesheetStore();
    const is_dialog_open = ref(false);
</script>

<template>
    <q-dialog
        v-model="timesheet_store.is_details_dialog_open"
        full-width
        full-height
        transition-show="jump-down"
        transition-hide="jump-down"
        @show="is_dialog_open = true"
        @hide="is_dialog_open = false"
    >
        <q-card
            class="shadow-12 rounded-15 bg-secondary hide-scrollbar"
            :style="($q.screen.lt.md ? '' : 'width:80vw !important;') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
        >

            <!-- employee name -->
            <q-card-section class="text-h4 text-weight-bolder text-center text-uppercase q-px-none q-py-sm">
                <span>{{ timesheet_store.selected_employee_name }}</span>
            </q-card-section>

            <!-- employee pay period details using chart -->
            <q-card-section
                v-if="is_dialog_open"
                :horizontal="!$q.screen.lt.md"
                class="q-px-md rounded-10 no-wrap"
            >
                <DetailsDialogChartHoursWorked class="col" />
                <DetailsDialogChartShiftTypes class="col q-ma-lg" />
                <DetailsDialogChartExpenses class="col" />
            </q-card-section>

            <q-card-section>
                <ExpenseDialogList />
            </q-card-section>

            <!-- list of shifts -->
            <q-card-section class="col-auto">
                <TimesheetWrapper mode="approval" />
            </q-card-section>
            <q-separator />
        </q-card>
    </q-dialog>
</template>