<template>
    <div class="row m-t-5" @keyup.enter="submitForm">
        <div class="col">
            <validation-wrapper-component :validator="v$.content">
                <input type="text" class="form-control fs-12" placeholder="Write your comments..." v-model.trim="parameters.content">
            </validation-wrapper-component>
        </div>
        <div class="col-auto b-a b-grey d-flex justify-content-center align-items-center rounded pointer">
            <i class="fa fa-paper-plane" @click="submitForm"></i>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required } from '@vuelidate/validators';
import { useFormHandler } from '@/composables/useFormHandler';
import route from '@/general/functions/router';

const props = withDefaults(defineProps<{
    section: string;
    id: number;
    module_type: string;
    data?: any;
}>(), {
    data: null,
});

const { submit } = useFormHandler(props);

const parameters = reactive({
    content: '',
    model_type: props.module_type,
});

onMounted(() => {
    if (props.data) {
        parameters.content = props.data.content;
    }
});

const rules = {
    content: { required },
};

const v$ = useVuelidate(rules, parameters);

const submitForm = async () => {
    if (!(await v$.value.$validate())) return;
    const url = props.data
        ? route('api.remark.update', props.data.id)
        : route('api.remark.create', props.id);
    const method = props.data ? 'put' : 'post';
    submit(url, method, props.section, true, true, parameters);
};
</script>
