<script
    setup
    lang="ts"
>
    import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
    import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
    import OverviewListFilters from 'src/modules/timesheet-approval/components/overview-list-filters.vue';

    import { useUiStore } from 'src/stores/ui-store';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import type { OverviewColumns, PayPeriodOverviewFilters } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
    import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
    import { ref } from 'vue';

    const overviewFilters = defineModel<PayPeriodOverviewFilters>('filters', { required: true });
    const visibleColumns = defineModel<OverviewColumns[]>('visibleColumns', { required: true });

    const uiStore = useUiStore();
    const timesheetStore = useTimesheetStore();
    const timesheetApprovalApi = useTimesheetApprovalApi();

    const isShowingFilters = ref(false);
</script>

<template>
    <div class="column full-width">
        <div class="col-auto row items-start full-width q-px-lg q-mt-md">
            <div class="col row">
                <PayPeriodNavigator
                    @date-selected="timesheetApprovalApi.getTimesheetOverviews"
                    @pressed-next-button="timesheetApprovalApi.getTimesheetOverviews"
                    @pressed-previous-button="timesheetApprovalApi.getTimesheetOverviews"
                    style="height: 40px;"
                />

                <q-space />

                <div
                    class="col-auto row no-wrap items-start"
                    :class="$q.platform.is.mobile ? 'q-mb-md' : ''"
                >
                    <q-btn-toggle
                        v-model="uiStore.user_preferences.is_timesheet_approval_grid"
                        push
                        rounded
                        color="white"
                        text-color="accent"
                        toggle-color="accent"
                        class="col-auto"
                        :class="$q.platform.is.mobile ? 'q-mb-sm' : 'q-mr-sm'"
                        :options="[
                            { icon: 'grid_view', value: true },
                            { icon: 'view_list', value: false },
                        ]"
                        style="height: 40px;"
                    />

                    <q-btn
                        push
                        rounded
                        icon="download"
                        color="accent"
                        :label="$q.screen.lt.md ? '' : $t('shared.label.download')"
                        class="col-auto q-mr-sm"
                        style="height: 40px;"
                        @click="timesheetStore.is_report_dialog_open = true"
                    />

                    <QTableFilters
                        v-model:search="overviewFilters.name_search_string"
                        class="col-auto q-mb-sm"
                    />
                </div>

                <q-btn
                    flat
                    icon="filter_alt"
                    color="white"
                    :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
                    class="col-auto q-ml-sm self-stretch bg-primary"
                    style="border-radius: 5px 5px 0 0;"
                    @click="isShowingFilters = !isShowingFilters"
                />
            </div>
        </div>

        <q-slide-transition>
            <OverviewListFilters
                v-if="isShowingFilters"
                v-model:filters="overviewFilters"
                v-model:visible-columns="visibleColumns"
                class="q-mx-lg col-auto bg-primary"
            />
        </q-slide-transition>

        <q-separator
            color="primary"
            size="5px"
            class="q-mx-lg q-my-none q-pa-none"
        />
    </div>
</template>