<script setup lang="ts">
type Props = {
    variant?: "solid" | "outlined";
    disabled?: boolean;
    error?: boolean;
    message?: string;
    placeholder?: string;
    modelValue: string | undefined;
};

// props

const props = withDefaults(defineProps<Props>(), {
    variant: "solid",
    disabled: false,
    placeholder: "وارد نشده",
});
const { variant, error, modelValue, disabled } = toRefs(props);

// emits

const emit = defineEmits(["update:modelValue"]);

// state

const inputRef = ref<HTMLInputElement | null>(null);

// computed

const value = computed({
    get: () => modelValue.value ?? "",
    set: (value) => emit("update:modelValue", value),
});

const classes = computed(() => {
    return [
        "flex items-center text-black justify-between cursor-text transition-all border-[1.5px] gap-3 typo-label-md px-4 py-2.5 lg:py-3.5 selection:bg-slate-100 rounded-md lg:rounded-100",
        {
            "input-solid": variant.value === "solid",
            "input-outlined": variant.value === "outlined",
            "pointer-events-none opacity-80 text-slate-500": disabled.value,
            "input-effects": !error.value,
            [variant.value === "solid" ? "input-solid-error" : "input-outlined-error"]: error.value,
        },
    ];
});
</script>

<template>
    <div
        v-bind="$attrs"
        :class="classes"
        @click="inputRef?.focus()"
    >
        <slot name="startItem" />

        <input
            v-model="value"
            ref="inputRef"
            class="outline-none flex-1 text-xs lg:text-sm placeholder-slate-400 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal"
            :placeholder="placeholder"
        />

        <slot name="endItem" />
    </div>
</template>
