<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';

const emit = defineEmits([
    'update:modelValue',
    'update:options',
    'keyup.enter',
    'remove'
]);

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: null
    },
    isOutlined: {
        type: Boolean,
        default: false
    },
    info: {
        type: String,
        default: ''
    },
    clearable: {
        type: Boolean,
        default: true
    }
});

const { t } = useI18n();
const requiredFieldRule = val => !!val || t('globals.fieldRequired');
const vnInputRef = ref(null);
const value = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    }
});
const hover = ref(false);
const styleAttrs = computed(() => {
    return props.isOutlined
        ? { dense: true, outlined: true, rounded: true }
        : {};
});

const focus = () => {
    vnInputRef.value.focus();
};

defineExpose({
    focus
});

const inputRules = [
    val => {
        const { min, max } = vnInputRef.value.$attrs;
        if (min >= 0) {
            if (Math.floor(val) < min) return t('inputMin', { value: min });
        }
        if (max > 0) {
            if (Math.floor(val) > max) return t('inputMax', { value: max });
        }
    }
];
</script>

<template>
    <div
        :rules="$attrs.required ? [requiredFieldRule] : null"
        @mouseover="hover = true"
        @mouseleave="hover = false"
    >
        <QInput
            ref="vnInputRef"
            v-model="value"
            v-bind="{ ...$attrs, ...styleAttrs }"
            :type="$attrs.type"
            :class="{ required: $attrs.required }"
            :clearable="false"
            :rules="inputRules"
            :lazy-rules="true"
            hide-bottom-space
            @keyup.enter="emit('keyup.enter')"
        >
            <template
                v-if="$slots.prepend"
                #prepend
            >
                <slot name="prepend" />
            </template>
            <template #append>
                <slot
                    v-if="$slots.append && !$attrs.disabled"
                    name="append"
                />
                <QIcon
                    v-if="hover && value && !$attrs.disabled && props.clearable"
                    name="close"
                    size="xs"
                    @click="
                        () => {
                            value = null;
                            emit('remove');
                        }
                    "
                />
                <QIcon
                    v-if="info"
                    name="info"
                >
                    <QTooltip max-width="350px">
                        {{ info }}
                    </QTooltip>
                </QIcon>
            </template>
        </QInput>
    </div>
</template>

<i18n lang="yaml">
en-US:
    inputMin: Must be more than {value}
    inputMax: Must be less than {value}
es-ES:
    inputMin: Debe ser mayor a {value}
    inputMax: Debe ser menor a {value}
ca-ES:
    inputMin: Ha de ser més gran que {value}
    inputMax: Ha de ser menys que {value}
fr-FR:
    inputMin: Doit être supérieur à {value}
    inputMax: Doit être supérieur à {value}
pt-PT:
    inputMin: Deve ser maior que {value}
    inputMax: Deve ser maior que {value}
</i18n>
