<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card
      class="q-dialog-plugin overflow-hidden"
      style="width: 100%; max-width: 1100px"
    >
      <DefaultDialogHeader
        :title="tbr ? 'Editar TBR' : 'Criar Novo TBR'"
        @close="onDialogCancel"
      />

      <q-form ref="formRef" @submit="onOKClick">
        <q-card-section class="q-pt-none">
          <p class="text-subtitle2 q-mb-md">Definir Valores e TBR</p>

          <div class="row q-col-gutter-sm">
            <DefaultInput
              v-model="form.year"
              label="Ano"
              class="col-3"
              outlined
              type="number"
              min="2000"
              max="2100"
              :rules="[inputRules.required]"
            />

            <DefaultCurrencyInput
              v-model="form.tbr_value"
              label="TBR $"
              class="col-3"
              outlined
            />

            <DefaultInput
              v-model="form.royalties_display"
              label="Royalties %"
              class="col-2"
              outlined
              type="number"
              min="0"
              max="100"
              :rules="[inputRules.required]"
            />

            <DefaultInput
              v-model="form.fnm_display"
              label="FMN %"
              class="col-2"
              outlined
              type="number"
              min="0"
              max="100"
              :rules="[inputRules.required]"
            />

            <DefaultInput
              v-model="form.maintenance_display"
              label="Manutenção %"
              class="col-2"
              outlined
              type="number"
              min="0"
              max="100"
              :rules="[inputRules.required]"
            />
          </div>
        </q-card-section>

        <q-card-actions>
          <q-space />
          <q-btn
            outline
            color="negative"
            label="Cancelar"
            @click="onDialogCancel"
          />
          <q-btn
            color="primary-2"
            label="Salvar"
            type="submit"
            :loading="loading"
          />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useInputRules } from "src/composables/useInputRules";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import { createTbr, updateTbr } from "src/api/tbr";

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

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

const { tbr } = defineProps({
  tbr: {
    type: Object,
    default: null,
  },
});

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

const formRef = ref(null);

const form = ref({
  year: tbr?.year ?? null,
  tbr_value: tbr ? Number(tbr.tbr_value) : null,
  royalties_display: tbr ? Number(tbr.royalties_percentage) * 100 : null,
  fnm_display: tbr ? Number(tbr.fnm_percentage) * 100 : null,
  maintenance_display: tbr ? Number(tbr.maintenance_percentage) * 100 : null,
});

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

async function onOKClick() {
  const payload = {
    year: form.value.year,
    tbr_value: form.value.tbr_value,
    royalties_percentage: (form.value.royalties_display ?? 0) / 100,
    fnm_percentage: (form.value.fnm_display ?? 0) / 100,
    maintenance_percentage: (form.value.maintenance_display ?? 0) / 100,
  };

  await execute(() => (tbr ? updateTbr(tbr.id, payload) : createTbr(payload)));
}
</script>
