<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card
      class="q-dialog-plugin dialog-form-card"
      style="width: 480px; max-width: 95vw"
    >
      <DefaultDialogHeader
        title="Adicionar Mídia"
        @close="onDialogCancel"
      />

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

              <CustomFileInput
                v-model="selectedFile"
                accept="image/*,video/*,.pdf"
                label="Arquivo"
                outlined
                :error="!!validationErrors.file"
                :error-message="validationErrors.file"
                :rules="[inputRules.required]"
                @update:model-value="validationErrors.file = null"
              />
            </div>
          </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"
            label="Adicionar"
            no-caps
            type="submit"
            :loading="loading"
          />
        </q-card-actions>
      </DefaultForm>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { createMedia } from "src/api/unit_media";
import { ref } from "vue";
import { useDialogPluginComponent } from "quasar";
import { useInputRules } from "src/composables/useInputRules";
import { useSubmitHandler } from "src/composables/useSubmitHandler";

import CustomFileInput from "src/components/defaults/CustomFileInput.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 { unitId } = defineProps({
  unitId: {
    type: Number,
    required: true,
  },
});

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

const { inputRules } = useInputRules();

const formRef = ref(null);

const form = ref({
  title: "",
  visible_to_franchisee: true,
});

const selectedFile = ref(null);

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

const onOKClick = async () => {
  await execute(() => {
    const formData = new FormData();

    formData.append("file", selectedFile.value);
    formData.append("title", form.value.title);
    formData.append("unit_id", unitId);
    formData.append("visible_to_franchisee", 1);

    return createMedia(formData);
  });
};
</script>