<script
    setup
    lang="ts"
>
    import { overview_column_names, type OverviewColumns, type PayPeriodOverviewFilters } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
    import { onMounted, ref } from 'vue';

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

    const column_options = ref<{ label: string, value: OverviewColumns }[]>([]);
    const EXCLUDED_COLUMNS: OverviewColumns[] = ['employee_last_name', 'employee_first_name', 'is_active']

    onMounted(() => {
        Object.values(overview_column_names).map(column => column_options.value.push({ label: `timesheet_approvals.table.${column}`, value: column as OverviewColumns }))
        column_options.value = column_options.value.filter(column => !EXCLUDED_COLUMNS.includes(column.value));
    })
</script>

<template>
    <div class="column text-uppercase text-white">
        <div class="col row">
            <q-checkbox
                v-model="filters.is_showing_inactive"
                keep-color
                color="accent"
                :label="$t('timesheet_approvals.table.filter_active')"
                class="col-auto q-px-sm"
                :class="filters.is_showing_inactive ? 'text-accent text-weight-bolder' : 'text-white text-weight-medium'"
            />

            <q-checkbox
                v-model="filters.is_showing_team_only"
                keep-color
                val="team"
                color="accent"
                :label="$t('timesheet_approvals.table.filter_team')"
                class="col-auto q-px-sm"
                :class="filters.is_showing_team_only ? 'text-accent text-weight-bolder' : 'text-white text-weight-medium'"
            />
        </div>

        <span class="col q-px-md q-pt-sm text-h6 text-bold ellipsis">
            {{ $t('timesheet_approvals.table.filter_columns') }}
        </span>

        <div class="col row">
            <q-option-group
                v-model="visible_columns"
                :options="column_options"
                inline
                keep-color
                color="accent"
                type="checkbox"
            >
                <template #label="scope">
                    <span class="text-caption text-uppercase text-weight-light">{{ $t(scope.label.toLowerCase()) }}</span>
                </template>
            </q-option-group>
        </div>
    </div>
</template>