<script
    setup
    lang="ts"
>
    const model = defineModel<string | number | null | undefined>({ required: true });
    const is_date_picker_open = defineModel<boolean>('isDatePickerOpen', {default: false});

    defineProps<{
        label?: string | undefined;
        requiresDatePicker?: boolean | undefined;
    }>();
</script>

<template>
    <q-input
        v-model="model"
        dense
        outlined
        color="accent"
        stack-label
        label-slot
        no-error-icon
        hide-bottom-space
        class="col q-mx-sm q-my-xs rounded-5 bg-dark shadow-12"
    >
        <template #label>
            <span
                class="text-weight-bolder text-uppercase"
                style="font-size: 0.85em;"
            >
                {{ label }}
            </span>
        </template>

        <template #append v-if="requiresDatePicker">
            <q-btn
                flat
                dense
                size="lg"
                icon="calendar_month"
                color="accent"
                @click="is_date_picker_open = true"
            >
                <q-dialog
                    v-model="is_date_picker_open"
                    backdrop-filter="none"
                >
                    <q-date
                        v-model="model"
                        mask="YYYY-MM-DD"
                        color="accent"
                        @update:model-value="is_date_picker_open = false"
                    />
                </q-dialog>
            </q-btn>
        </template>
    </q-input>
</template>