<template>
    <div class="row">
        <div class="col p-r-0">
            <validation-wrapper-component :validator="v$.parameters.identification_number">
                <input type="text" class="form-control fs-12" placeholder="Edit identification number" v-model.trim="parameters.identification_number">
            </validation-wrapper-component>
        </div>
        <div class="col-auto bg-success d-flex justify-content-center align-items-center pointer text-white">
            <i class="fa fa-check" @click="submitForm"></i>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useFormHandler } from '@/composables/useFormHandler';
import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators';
import route from '@/general/functions/router';

interface Props {
    id: number;
    data?: any;
    section: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
    (e: 'submit'): void;
}>();

const { parameters, submit } = useFormHandler({
    section: props.section,
    data: {
        identification_number: props.data?.identification_number || ''
    }
});

const rules = {
    parameters: {
        identification_number: { required }
    }
};

const v$ = useVuelidate(rules, { parameters });

const submitForm = async () => {
    const isValid = await v$.value.$validate();
    if (!isValid) return;

    submit(route('api.document.reference.update', props.id), 'put', '', false, false, parameters.value);
    emit('submit');
};
</script>
