<template>
    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
        <textarea
            :id="innerId"
            v-model="inner"
            :name="field.key"
            :rows="field.rows"
            class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full"
        />
        <div v-if="field.hint" class="absolute right-0 mr-2 flex items-start mt-2 top-0 h-full">
            <hint :value="field.hint"></hint>
        </div>
        <field-label :name="field.name" :required="field.required"></field-label>
    </label>
</template>

<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
import Hint from '../Hint.vue';

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
    modelValue: {
        required: true,
        validator: (value) => value === null || typeof value === 'string',
    },
    field: {
        required: true,
        validator: (value) =>
            hasKeys(value, [...globalFieldRules(), 'required', 'rows']) &&
            typeof value.required === 'boolean' &&
            typeof value.key === 'string' &&
            value.key.length > 0 &&
            typeof value.name === 'string' &&
            value.name.length > 0 &&
            hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
    },
    id: {
        required: false,
    },
    hint: {
        required: false,
        validator: (value) => value === null || typeof value === 'string',
        default: () => null,
    },
});

const innerId = computed(() => (props.id ? props.id : props.field.key));

const inner = computed({
    get: () => props.modelValue,
    set: (v) => emit('update:modelValue', v),
});
</script>
