<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import FormPopup from 'components/FormPopup.vue';

const $props = defineProps({
    reason: {
        type: String,
        default: '',
    },
    isHimself: {
        type: Boolean,
        default: false,
    },
});

const emit = defineEmits(['onSubmit']);

const { t } = useI18n();

const closeButton = ref(null);
const reasonFormData = ref($props.reason);

const onSubmit = () => {
    emit('onSubmit', reasonFormData.value);
    closeForm();
};

const closeForm = () => {
    if (closeButton.value) closeButton.value.click();
};
</script>

<template>
    <FormPopup @on-submit="onSubmit()">
        <template #form-inputs>
            <QInput
                :label="t('Reason')"
                v-model="reasonFormData"
                type="textarea"
                autogrow
                :disable="!isHimself"
            />
        </template>
    </FormPopup>
</template>

<i18n>
es:
    Reason: Motivo
</i18n>
