<template>
<div :class="wrapperClasses">
    <label v-if="label"
        class="fw-bold"
        :for="id">
        {{ label }}
        <template v-if="required">*</template>
    </label>
    <input class="form-control" :id="id" :name="name" :type="type" :value="modelValue" :pattern="pattern" :placeholder="placeholder" :required="required" :min="min" :max="max" :tabindex="tabIndex ?? null" @input="$emit('update:modelValue', $event.target.value)" @keydown.enter="handleOnEnter" @blur="handleOnBlur" ref="input" />
</div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const props = defineProps([
    "modelValue",
    "label",
    "classes",
    "id",
    "type",
    "placeholder",
    "pattern",
    "required",
    "name",
    "tabIndex",
    "onEnter",
    "onBlur",
    "autofocus",
    "min",
    "max",
]);

defineEmits(["update:modelValue"]);

const input = ref(null);
const wrapperClasses = ref([""]);

if (Array.isArray(props.classes)) {
    wrapperClasses.value = props.classes;
}

const handleOnEnter = () => {
    if (!props.onEnter) {
        return;
    }
    props.onEnter();
};

const handleOnBlur = (e) => {
    if (!props.onBlur) {
        return;
    }
    props.onBlur(e, { id: props.id, value: props.modelValue });
}

onMounted(() => {
    if (props.autofocus) {
        input.value.focus();
    }
});
</script>

<style lang="scss" scoped>
@import "../../scss/variables.scss";

input {
    border-radius: 0;

    &:active,
    &:focus {
        outline: none;
        box-shadow: none;
    }
}
</style>
