<script setup lang="ts">
    import { useField } from 'vee-validate';
    import { useAutoAnimate } from '@formkit/auto-animate/vue';
    import UIInput from '@/UI-kit/components/UI/inputs/UIInput.vue';
    import { UIRadioButton } from '@/index';
    import UISelect from '@/UI-kit/components/UI/select/UISelect.vue';
    import type { IDocsSchemaType } from '@/modules/form/types';
    import { EInputType } from '@/UI-kit/types';
    import { computed } from 'vue';

    const props = withDefaults(defineProps<IDocsSchemaType>(), {
        validator: undefined,
        initialValue: '',
        validateOnChange: false,
    });

    const [parent] = useAutoAnimate();

    const { value, errorMessage, handleBlur, setErrors } = useField(props.name, props.validator, {
        initialValue: props.initialValue ?? '',
        validateOnValueUpdate: props.validateOnChange,
        syncVModel: true,
    });

    const isRadioType = computed(() => props.type === EInputType.radio && props.radioButtonData);
    const hasSelect = computed(() => props.type === EInputType.select && props.select?.options);

    const clearFieldError = () => setErrors('');
</script>

<template>
    <div ref="parent" class="ui-input">
        <div class="ui-input__wrapper">
            <UIRadioButton
                v-if="isRadioType"
                :id="props.name"
                :model-value="value"
                :options="props.radioButtonData!"
                :name="props.name"
                :label="props.label"
                :error-message="errorMessage"
                :is-error="!!errorMessage"
                @input="clearFieldError"
                @update:model-value="value = $event"
            />

            <UISelect
                v-else-if="hasSelect"
                :id="props.name"
                :model-value="value"
                :is-error="!!errorMessage"
                :options="props.select!.options"
                :label="props.label"
                :placeholder="props.placeholder"
                :error-message="errorMessage"
                :show-search-input="props.select!.showSearchInput"
                :placeholder-search-input="props.select!.placeholderSearchInput"
                @blur="handleBlur"
                @input="clearFieldError"
                @update:model-value="value = $event"
            />

            <UIInput
                v-else
                :id="props.name"
                :model-value="value"
                :is-error="!!errorMessage"
                :component="props.components"
                :mask="props.mask"
                :name="props.name"
                :placeholder="props.placeholder"
                :type="props.type"
                :masked="props.masked"
                :disabled="props.disabled"
                :readonly="props.readonly"
                :is-date="props.isDate"
                :is-show-clear="props.isShowClear"
                :error-message="errorMessage"
                :label="props.label"
                :helper-img="props.helperImg"
                :is-capitalize="props.isCapitalize"
                @blur="handleBlur"
                @input="clearFieldError"
                @update:model-value="value = $event"
            />
        </div>
    </div>
</template>
