<script
    setup
    lang="ts"
>
    const model = defineModel<string | number | {label: string, value: unknown} | undefined>();

    const { readonly = false, localizeOptions = false } = defineProps<{
        options: { label: string, value: string | number }[];
        labelString: string;
        isEditing: boolean;
        readonly?: boolean;
        localizeOptions?: boolean;
        type?: "number" | "textarea" | "time" | "text" | "tel" | "password" | "email" | "search" | "file" | "url" | "date" | "datetime-local" | undefined;
    }>();
</script>

<template>
    <q-select
        v-model="model"
        dense
        :stack-label="!isEditing"
        :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
        label-color="accent"
        class="q-ma-xs"
        popup-content-class="text-weight-medium text-h6 rounded-5"
        options-selected-class="bg-accent text-white"
        :menu-offset="[0, 10]"
        :options="options"
        :readonly="readonly || !isEditing"
        :hide-dropdown-icon="!isEditing"
        :label="labelString"
        :option-label="opt => localizeOptions ? $t(opt.label) : opt.label ?? opt"
        hint=''
    >
        <template #label>
            <span class="text-weight-bolder text-accent text-uppercase">{{ labelString }}</span>
        </template>
        
        <template #selected-item="scope">
            <span class="text-weight-light" style="font-size: 1.2em;">{{ scope.opt.label }}</span>
        </template>
    </q-select>
</template>