<script
    setup
    lang="ts"
>
    import { default_timesheet_approval_cvs_report_filters, type TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
    import { ref, computed } from 'vue';

    const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(default_timesheet_approval_cvs_report_filters);

    const company_options = [
        { label: 'Targo', value: report_filter_options.value.companies.targo },
        { label: 'Solucom', value: report_filter_options.value.companies.solucom },
    ];

    const type_options = [
        { label: 'timesheet_approvals.print_report.shifts', value: report_filter_options.value.types.shifts },
        { label: 'timesheet_approvals.print_report.expenses', value: report_filter_options.value.types.expenses },
        { label: 'shared.shift_type.holiday', value: report_filter_options.value.types.holiday },
        { label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
    ];

    const is_download_button_disabled = computed(() => {
        return company_options.map(option => option.value).filter(value => value === true).length > 0 ||
            type_options.map(option => option.value).filter(value => value === true).length > 0;
    });
</script>

<template>
    <q-btn-group
        rounded
        push
    >
        <q-btn
            rounded
            push
            color="primary"
            icon="print"
            :disable="is_download_button_disabled"
        />

        <q-btn-dropdown
            rounded
            push
            color="white"
            text-color="primary"
            icon="checklist"
        >
            <q-list class="row">
                <q-item class="col">
                    <q-item-label class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
                        {{ $t('timesheet_approvals.print_report.company') }}
                    </q-item-label>

                    <q-item-section
                        row
                        no-wrap
                    >
                        <q-checkbox
                            v-for="option, index in company_options"
                            :key="index"
                            v-model="option.value"
                            :val="option.label"
                            :label="option.label"
                        />
                    </q-item-section>
                </q-item>

                <q-separator
                    spaced
                    vertical
                    color="primary"
                />

                <q-item class="col">
                    <q-item-section
                        row
                        no-wrap
                    >
                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
                            {{ $t('timesheet_approvals.print_report.type') }}</p>
                        <q-checkbox
                            v-for="option, index in type_options"
                            :key="index"
                            v-model="option.value"
                            :val="option.label"
                            :label="option.label"
                        />
                    </q-item-section>
                </q-item>
            </q-list>
        </q-btn-dropdown>
    </q-btn-group>
</template>