<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <div style="width: 100%; max-width: 600px">
      <q-card
        class="dialog-form-card"
        style="width: 100%"
      >
        <DefaultDialogHeader
          :title="replyItem ? 'Editar Comentário' : 'Responder Suporte'"
          @close="onDialogCancel"
        />

        <DefaultForm
          ref="formRef"
          @submit="onOKClick"
        >
          <q-scroll-area
            ref="scrollAreaRef"
            class="dialog-form-scroll dialog-form-scroll--xs"
          >
            <q-card-section class="q-pt-sm">
              <DefaultInput
                v-model="form.reply"
                v-model:error="validationErrors.reply"
                class="col-12"
                label="Descreva a resposta"
                type="textarea"
                :rules="[inputRules.required]"
              />
            </q-card-section>
          </q-scroll-area>

          <q-card-actions
            align="right"
            class="q-px-md q-pb-md"
          >
            <q-btn
              color="primary"
              label="Cancelar"
              no-caps
              outline
              @click="onDialogCancel"
            />

            <q-btn
              color="primary"
              no-caps
              type="submit"
              :label="replyItem ? 'Salvar' : 'Responder'"
              :loading="loading"
            />
          </q-card-actions>
        </DefaultForm>
      </q-card>
    </div>
  </q-dialog>
</template>

<script setup>
import {
  createSupportReply,
  updateSupportReply,
} from "src/api/support_reply";

import { useDialogPluginComponent } from "quasar";
import { useForm } from "src/composables/useForm";
import { useInputRules } from "src/composables/useInputRules";
import { useScroll } from "src/composables/useScroll";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import { useTemplateRef } from "vue";

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultForm from "src/components/defaults/DefaultForm.vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";

defineEmits([...useDialogPluginComponent.emits]);

const { ticketId, replyItem } = defineProps({
  replyItem: {
    type: Object,
    default: null,
  },
  ticketId: {
    type: Number,
    required: true,
  },
});

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();

const { inputRules } = useInputRules();
const { scrollToComponent } = useScroll();

const formRef = useTemplateRef("formRef");
const scrollAreaRef = useTemplateRef("scrollAreaRef");

const { form, getUpdatedFields } = useForm({
  reply: replyItem?.reply ?? null,
});

const {
  loading,
  validationErrors,
  execute,
} = useSubmitHandler({
  containerRef: scrollAreaRef,
  formRef,
  onSuccess: () => {
    onDialogOK(true);
  },
  scrollFn: scrollToComponent,
});

const onOKClick = async () => {
  const payload = replyItem
    ? { ...getUpdatedFields.value }
    : { reply: form.reply };

  await execute(() => {
    if (replyItem) {
      return updateSupportReply(
        ticketId,
        replyItem.id,
        payload,
      );
    }

    return createSupportReply(
      ticketId,
      payload,
    );
  });
};
</script>