<template>
    <div class="flex flex-col">
        <label
            :for="id"
            class="block mb-2 text-sm"
            :class="userInputValid ? 'font-medium text-gray-900' : 'font-bold text-red'">{{ label }}</label>
        <textarea
            v-if="textArea"
            :id="id"
            class=" border border-gray-500 text-gray-900 text-sm rounded-lg block w-full p-2.5"
            :class="userInputValid ? 'bg-slate-50 focus:ring-blue focus:border-blue' : 'border-red bg-rose-50 ring-1 ring-red ring-inset focus:ring-red focus:border-red focus:ring-inset'"
            :value="value"
            @input="$emit('update:value', $event.target.value)"
            maxlength="65535"
            rows="3"
            :placeholder="placeholder"
            :required="required"
            :autofocus="autofocus"
            :disabled="disabled" />
        <input
            v-else
            type="text"
            :id="id"
            class=" border border-gray-500 text-gray-900 text-sm rounded-lg block w-full p-2.5"
            :class="userInputValid ? 'bg-slate-50 focus:ring-blue focus:border-blue' : 'border-red bg-rose-50 ring-1 ring-red ring-inset focus:ring-red focus:border-red focus:ring-inset'"
            :value="value"
            @input="$emit('update:value', $event.target.value)"
            :maxLength="maxLength"
            :placeholder="placeholder"
            :required="required"
            :autofocus="autofocus"
            :disabled="disabled">
        <div
            v-if="!textArea && maxLength && value"
            class="flex justify-end mt-1 -mb-5 pointer-events-none">
            <span
                class="text-xs"
                :class="value?.length === maxLength ? 'text-red' : 'text-slate-300'">
                {{ value?.length ?? '0' }}/{{ maxLength }}
            </span>
        </div>
    </div>
</template>

<script>

export default {
    name: "InputText",
    emits: ['update:value'],
    props: {
        id: {
            type: String,
            default: '',
            required: true
        },
        label: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        },
        maxLength: {
            type: Number,
            default: null
        },
        placeholder: {
            type: String,
            default: ''
        },
        required: {
            type: Boolean,
            default: false
        },
        textArea: {
            type: Boolean,
            default: false
        },
        autofocus: {
            type: Boolean,
            default: false
        },
        userInputValid: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
}
</script>
