<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card
      class="q-dialog-plugin overflow-hidden"
      style="width: 560px; max-width: 95vw"
    >
      <DefaultDialogHeader :title="dialogTitle" @close="onDialogCancel" />

      <q-form ref="formRef" @submit="onOKClick">
        <q-card-section class="q-pt-none">
          <div class="column q-gutter-sm">
            <DefaultInput
              v-model="form.title"
              v-model:error="validationErrors.title"
              label="Título"
              outlined
              :rules="[inputRules.required]"
            />

            <q-input
              v-model="form.content"
              autogrow
              label="Conteúdo"
              outlined
              rows="5"
              type="textarea"
              :error="!!validationErrors.content"
              :error-message="validationErrors.content"
              @update:model-value="validationErrors.content = null"
            />

            <q-toggle
              v-model="form.visible_to_franchisee"
              color="positive"
              label="Visível ao franqueado"
            />
          </div>
        </q-card-section>

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

          <q-btn
            color="primary-2"
            type="submit"
            :label="history ? 'Salvar' : 'Adicionar'"
            :loading="loading"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { createHistory, updateHistory } from "src/api/unit_history";
import { ref } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useInputRules } from "src/composables/useInputRules";
import { useSubmitHandler } from "src/composables/useSubmitHandler";

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

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

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

const { inputRules } = useInputRules();

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

const dialogTitle = history ? "Editar Histórico" : "Novo Histórico";

const formRef = ref(null);
const form = ref({
  content: history?.content ?? "",
  title: history?.title ?? "",
  visible_to_franchisee: history?.visible_to_franchisee ?? false,
});

const { loading, validationErrors, execute } = useSubmitHandler({
  formRef,
  onSuccess: (result) => onDialogOK(result),
});

async function onOKClick() {
  await execute(() => {
    const payload = {
      content: form.value.content,
      title: form.value.title,
      unit_id: unitId,
      visible_to_franchisee: form.value.visible_to_franchisee,
    };

    return history
      ? updateHistory(history.id, payload)
      : createHistory(payload);
  });
}
</script>
