<script
    setup
    lang="ts"
>
    import { ref } from 'vue';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue';
    import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue';
    import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue';
    import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';

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

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

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

<template>
    <q-dialog
        v-model="dialog_model"
        full-width
        transition-show="jump-down"
        transition-hide="jump-down"
    >
        <!-- loader -->
        <q-card
            v-if="timesheet_store.is_loading"
            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>

        <q-card
            v-else
            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 text-primary q-pa-none text-uppercase col-auto"
            >
                <span>{{ timesheet_store.pay_period_details.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 for supervisor editting -->
            <q-card-section
                v-if="!is_showing_graph"
                class="q-pa-none"
            >
                <!-- list of shifts -->
                <q-card-section
                    :horizontal="$q.screen.gt.sm"
                    class="q-pa-none rounded-10"
                >
                    <TimesheetWrapper
                        dense
                        :employee-email="employeeEmail"
                    />
                </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;"
                >
                    <DetailedDialogChartHoursWorked class="col-7" />

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

                    <div class="column col justify-center no-wrap q-pa-none">
                        <DetailedDialogChartShiftTypes class="col-5" />

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

                        <DetailedDialogChartExpenses class="col" />
                    </div>
                </q-card-section>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>