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'),
    BaseGrid: () => import(/* webpackChunkName: "BaseGrid" */ '@elements/BaseGrid/index.vue'),
    BaseRadio: () => import(/* webpackChunkName: "BaseRadio" */ '@elements/BaseRadio/index.vue'),
    BaseAlert: () => import(/* webpackChunkName: "BaseAlert" */ '@elements/BaseAlert/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) => {
          console.log(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;
