import { cloneDeep, isNil } from 'lodash';
import { notifyError } from 'src/helpers';
import { Ref, computed, onMounted, reactive, ref, toRaw } from 'vue';
import { useDialog } from './useDialog';

export interface UseDialogFormParams {
  idKey: string;
  defaultForm: Record<string, any>;
  data?: Ref<any>;
  validateFn?: (form: any) => boolean | string[];
  saveFn?: (payload: any) => Promise<any>;
}

export function useDialogForm({ idKey = 'ID', defaultForm = {}, data = ref(null), validateFn = () => true, saveFn = async () => Promise.resolve(alert('saveFn not defined')) }: UseDialogFormParams) {
  onMounted(() => initForm());
  const { dialogRef, onDialogOK, onDialogCancel } = useDialog();
  const isNew = computed(() => data && isNil(data.value?.[idKey]));
  const form = reactive<any>({});
  const loading = ref(false);
  const valid = computed(() => validateFn(form));

  function save() {
    if (!valid.value) return notifyError(new Error(), 'Faltan campos obligatorios');

    loading.value = true;
    const payload = cloneDeep(toRaw(form));

    saveFn(payload)
      .then(() => {
        onDialogOK(true)
      })
      .catch((err) => notifyError(err))
      .finally(() => (loading.value = false));
  }

  function initForm() {
    const dataValue = cloneDeep(data?.value);
    Object.keys(defaultForm).forEach((key) => {
      if (dataValue?.[key] !== undefined) {
        form[key] = dataValue[key];
      } else {
        form[key] = defaultForm[key] || null;
      }
    });
  }

  return { form, loading, dialogRef, isNew, valid, save, onDialogOK, onDialogCancel };
}