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

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

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

    const q = useQuasar();
    const timesheetStore = useTimesheetStore();
    const timesheetApprovalApi = useTimesheetApprovalApi();

    const isShowingFilters = ref(false);

    const filterButtonBgColor = computed(() => q.dark.isActive ? 'dark' : 'primary')
</script>

<template>
    <div class="column full-width">
        <div class="col-auto column no-wrap flex-center full-width">
            <div class="col-auto row justify-between items-center full-width">
                <PayPeriodNavigator
                    class="col-auto"
                    @date-selected="timesheetApprovalApi.getTimesheetOverviews"
                    @pressed-next-button="timesheetApprovalApi.getTimesheetOverviews"
                    @pressed-previous-button="timesheetApprovalApi.getTimesheetOverviews"
                />

                <q-btn
                    push
                    rounded
                    color="accent"
                    icon="download"
                    class="col-auto q-px-xl"
                    @click="timesheetStore.is_report_dialog_open = true"
                />
            </div>


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

            <q-btn
                icon="filter_alt"
                :color="filterButtonBgColor"
                :label="$q.platform.is.mobile ? '' : $t('shared.label.filter')"
                class="col-auto full-width"
                style="border-radius: 5px 5px 0 0;"
                @click="isShowingFilters = !isShowingFilters"
            />

        </div>

        <div class="col-auto full-width">
            <q-slide-transition>
                <OverviewListFilters
                    v-if="isShowingFilters"
                    v-model:filters="overviewFilters"
                    v-model:visible-columns="visibleColumns"
                    :class="`bg-${filterButtonBgColor}`"
                />
            </q-slide-transition>
        </div>
    </div>
</template>