<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, 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 headerComponent = ref<HTMLElement | null>(null);

    const table_max_height = computed(() => {
        const height = page_height.value - (headerComponent.value?.clientHeight ?? 0) - 20;
        console.log('offset height of header: ', headerComponent.value?.clientHeight);
        console.log('height calculated: ', height);
        return height;
    });

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

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

<template>
    <q-page
        class="bg-secondary"
        :style-fn="tableStyleFunction"
    >
        <DetailsDialog
            :is-loading="timesheet_store.is_loading"
            :employee-overview="timesheet_store.current_pay_period_overview"
            :timesheets="timesheet_store.timesheets"
        />

        <OverviewReport />

        <div
            class="column items-center scroll q-pa-sm"
            style="min-height: inherit;"
        >
            <div
                ref="headerComponent"
                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 ?? ''"
                />
            </div>

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