<script
    setup
    lang="ts"
>
    /* eslint-disable */
    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 OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';

    import { date } from 'quasar';
    import { computed, onMounted, onUnmounted, ref } from 'vue';
    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
    import { useTimesheetStore } from 'src/stores/timesheet-store';

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

    const page_height = ref(0);
    const header_height = ref(0);
    const table_max_height = computed(() => page_height.value - header_height.value);

    const tableStyleFunction = (offset: number, height: number) => {
        page_height.value = height - offset;

        return { minHeight: height - offset + 'px' };
    };

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

    onUnmounted(() => {
        timesheet_store.unsubscribeToPayPeriodObservable();
    })

    const details_dialog_props = {
        'is-loading': timesheet_store.is_loading,
        'employee-overview': timesheet_store.current_pay_period_overview,
        timesheets: timesheet_store.timesheets,
    }
</script>

<template>
    <q-page
        class="bg-secondary"
        :style-fn="tableStyleFunction"
    >
        <DetailsDialog v-bind="details_dialog_props" />

        <OverviewReport />

        <div
            class="column items-center scroll q-px-sm full-width"
            style="min-height: inherit;"
        >
            <div class="col-auto">
                <PageHeaderTemplate
                    title="timesheet_approvals.page_title"
                    :start-date="timesheet_store.pay_period?.period_start ?? ''"
                    :end-date="timesheet_store.pay_period?.period_end ?? ''"
                    @on-get-component-height="value => header_height = value"
                />
            </div>

            <div class="col-grow full-width">
                <OverviewList :max-height="table_max_height" />
            </div>
        </div>
    </q-page>
</template>