<script
    setup
    lang="ts"
>
    /* eslint-disable */
    import { onMounted, ref } from 'vue';
    import { date } from 'quasar';
    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
    import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
    import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';

    const timesheet_approval_api = useTimesheetApprovalApi();
    const timesheet_store = useTimesheetStore();

    onMounted(async () => {
        await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
    });
</script>

<template>
    <q-page
        padding
        class="column q-pa-md bg-secondary"
    >
        <PageHeaderTemplate
            title="timesheet_approvals.page_title"
            :start-date="timesheet_store.pay_period?.period_start ?? ''"
            :end-date="timesheet_store.pay_period?.period_end ?? ''"
            class="col-auto"
        />

        <DetailsDialog
            :is-loading="timesheet_store.is_loading"
            :employee-overview="timesheet_store.current_pay_period_overview"
            :timesheets="timesheet_store.timesheets"
        />

        <div
            class="col-auto full-width q-px-lg"
            :class="($q.screen.lt.md ? 'column flex-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
        >
            <PayPeriodNavigator
                @date-selected="timesheet_approval_api.getTimesheetOverviews"
                @pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
                @pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
                :class="$q.screen.lt.md ? 'q-mb-sm' : ''"
            />

            <q-space />

            <q-btn-toggle
                v-model="timesheet_store.is_approval_grid_mode"
                push
                rounded
                color="white"
                text-color="accent"
                toggle-color="accent"
                :class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-md'"
                :options="[
                    { icon: 'grid_view', value: true },
                    { icon: 'view_list', value: false },
                ]"
            />

            <div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md  ? 'q-mb-md' : ''">
                <q-btn-dropdown
                    push
                    rounded
                    icon="filter_alt"
                    color="accent"
                    :label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
                    class="col-auto q-mr-sm"
                />

                <QTableFilters v-model:search="timesheet_store.search_filter" />
            </div>
        </div>

        <OverviewList class="col" />
    </q-page>
</template>