import veeValidateMixin from "@mixins/veeValidateMixin";
import axiosApi, { param } from "@assets/js/axios-api";

const formMixin = {
  components: {
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
    BaseCheckbox: () => import(/* webpackChunkName: "BaseCheckbox" */ '@elements/BaseCheckbox/index.vue'),
    GroupCheckbox: () => import(/* webpackChunkName: "GroupCheckbox" */ '@components/GroupCheckbox/index.vue'),
    GroupRadio: () => import(/* webpackChunkName: "GroupRadio" */ '@components/GroupRadio/index.vue'),
    BaseInput: () => import(/* webpackChunkName: "BaseInput" */ '@elements/BaseInput/index.vue'),
    BaseTextarea: () => import(/* webpackChunkName: "BaseTextarea" */ '@elements/BaseTextarea/index.vue'),
    BaseSelect: () => import(/* webpackChunkName: "BaseSelect" */ '@elements/BaseSelect/index.vue'),
    BaseSelectSearch: () => import(/* webpackChunkName: "BaseSelectSearch" */ '@elements/BaseSelectSearch/index.vue'),
    BaseCep: () => import(/* webpackChunkName: "BaseCep" */ '@elements/BaseCep/index.vue'),
    BaseGrid: () => import(/* webpackChunkName: "BaseGrid" */ '@elements/BaseGrid/index.vue'),
    BaseRadio: () => import(/* webpackChunkName: "BaseRadio" */ '@elements/BaseRadio/index.vue'),
    BaseAlert: () => import(/* webpackChunkName: "BaseAlert" */ '@elements/BaseAlert/index.vue'),
    BaseVueToggles: () => import(/* webpackChunkName: "BaseVueToggles" */ '@elements/BaseVueToggles/index.vue'),
  },
  mixins: [veeValidateMixin],
  data() {
    return {
      btnSubmitLoading: false,
      disableForm: false,
      disableSubmitButton: false,
      alert: {},
      validateList: [],
    };
  },
  computed: {
    sendData() {
      return { ...this.configurations };
    },
  },
  methods: {
    onValidationObserverSubmit(validationObserver) {
      validationObserver = validationObserver || this.$refs.validationObserver;
      const isInvalid = validationObserver.flags.invalid;
      this.validateList = validationObserver.errors;
      if (isInvalid) {
        this.alert = {
          type: 'error',
          message: 'Alguns campos estão incorretos. Corrija os campos em vermelho.',
        };
      }
    },
    formSuccess(data) {},
    formError(data, validationObserver) {
      validationObserver = validationObserver || this.$refs.validationObserver;
      validationObserver.setErrors(data.errors);
    },
    onSubmit(form = {}, sendData, validationObserver) {
      validationObserver = validationObserver || this.$refs.validationObserver;
      this.alert = {};

      this.btnSubmitLoading = true;
      this.disableForm = true;
      let hasNotRedirect = true;

      const { method, action } = form;

      sendData = sendData || this.sendData;
      axiosApi({
        method: method || 'post',
        url: action || this.action,
        data: param(sendData),
      })
        .then(({ data }) => {
          if (typeof data != 'object') {
            throw new Error(data);
          }

          const { warning, errors, success, redirect } = data;

          if (warning) {
            this.alert = {
              type: 'warning',
              message: warning,
            };
          }
          if (errors) {
            const { message } = errors;

            this.alert = {
              type: 'error',
              message: message || 'Alguns campos estão incorretos. Corrija os campos em vermelho.',
            };

            this.formError(data, validationObserver);
          }
          if (success) {
            this.alert = {
              type: 'success',
              message: success,
            };
            this.formSuccess(data);
          }
          if (redirect) {
            hasNotRedirect = !redirect;
            window.location.href = redirect;
          }
        })
        .catch(err => {
          this.alert = {
            type: 'warning',
            message: 'Aconteceu algo de inesperado, por favor tente novamente!',
          };
        })
        .finally(() => {
          if (hasNotRedirect) {
            this.disableForm = false;
            this.btnSubmitLoading = false;
          }
        });
    },
  },
};

export default formMixin;
