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 = Object.entries(errors)[0][1][0];
            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;
