<script setup>
import { ref, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
const props = defineProps({
  modelValue: { type: [Number, String, Object, null], required: false },
  placeholder: { type: String, required: false }
});
const emit = defineEmits(["update:modelValue", "change"]);
const { t } = useI18n();
const mode = ref("equals");
const equalsValue = ref(null);
const minValue = ref(null);
const maxValue = ref(null);
watch(() => props.modelValue, (val) => {
  if (val == null || val === "") {
    equalsValue.value = null;
    minValue.value = null;
    maxValue.value = null;
  } else if (typeof val === "object") {
    mode.value = "range";
    equalsValue.value = null;
    minValue.value = val.min ?? null;
    maxValue.value = val.max ?? null;
  } else {
    mode.value = "equals";
    equalsValue.value = Number(val);
    minValue.value = null;
    maxValue.value = null;
  }
}, { immediate: true });
const hasValue = computed(() => {
  if (props.modelValue == null || props.modelValue === "") return false;
  if (typeof props.modelValue === "object") {
    const { min, max } = props.modelValue;
    return min != null || max != null;
  }
  return true;
});
const displayLabel = computed(() => {
  if (!hasValue.value) return t("Search");
  if (typeof props.modelValue === "object") {
    const { min, max } = props.modelValue;
    if (min != null && max != null) return `${min} \u2013 ${max}`;
    if (min != null) return `\u2265 ${min}`;
    if (max != null) return `\u2264 ${max}`;
  }
  return `= ${props.modelValue}`;
});
const apply = () => {
  let out = null;
  if (mode.value === "equals") {
    out = equalsValue.value;
  } else {
    const outRange = {};
    if (minValue.value != null) outRange.min = minValue.value;
    if (maxValue.value != null) outRange.max = maxValue.value;
    if (Object.keys(outRange).length > 0) out = outRange;
  }
  emit("update:modelValue", out);
  emit("change", out);
};
const clear = () => {
  equalsValue.value = null;
  minValue.value = null;
  maxValue.value = null;
  emit("update:modelValue", null);
  emit("change", null);
};
</script>

<template>
    <q-btn-dropdown
        dense flat square no-caps
        :color="hasValue ? 'primary' : 'grey-7'"
        :label="displayLabel"
        :icon="hasValue ? 'sym_o_filter_alt' : 'sym_o_search'"
        size="sm"
        content-class="l-search-number-dropdown"
    >
        <div class="q-pa-md" style="min-width: 280px">
            <q-tabs
                v-model="mode"
                dense
                no-caps
                align="left"
                active-color="primary"
                indicator-color="primary"
                class="text-grey"
            >
                <q-tab name="equals" :label="t('Equals')" />
                <q-tab name="range" :label="t('Range')" />
            </q-tabs>

            <q-separator class="q-mb-sm" />

            <q-tab-panels v-model="mode" animated>
                <q-tab-panel name="equals" class="q-pa-none">
                    <q-input
                        v-model.number="equalsValue"
                        dense filled square
                        type="number"
                        mask="##########"
                        :placeholder="placeholder || t('Enter a number')"
                        autofocus
                        @keydown.enter.prevent="apply"
                    />
                </q-tab-panel>
                <q-tab-panel name="range" class="q-pa-none">
                    <div class="row q-gutter-sm items-center">
                        <q-input
                            v-model.number="minValue"
                            dense filled square
                            type="number"
                            mask="##########"
                            :placeholder="t('Min')"
                            class="col"
                            @keydown.enter.prevent="apply"
                        />
                        <span class="text-grey">—</span>
                        <q-input
                            v-model.number="maxValue"
                            dense filled square
                            type="number"
                            mask="##########"
                            :placeholder="t('Max')"
                            class="col"
                            @keydown.enter.prevent="apply"
                        />
                    </div>
                </q-tab-panel>
            </q-tab-panels>

            <div class="row q-gutter-sm justify-end q-mt-md">
                <q-btn flat dense :label="t('Clear')" color="negative" @click="clear" />
                <q-btn flat dense :label="t('Apply')" color="primary" @click="apply" />
            </div>
        </div>
    </q-btn-dropdown>
</template>
