import Vue from 'vue';
import axios from 'axios';

import formMixin from '@mixins/formMixin';

const vm = new Vue({
  components: {
    BaseAlert: () => import(/* webpackChunkName: "BaseAlert" */ '@elements/BaseAlert/index.vue'),
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    TheHeader: () => import(/* webpackChunkName: "TheHeader" */ '@components/TheHeader/index.vue'),
  },
  mixins: [formMixin],
  data() {
    return {
      isLoading: true,
      btnSubmitLoading: false,
      disableForm: false,
      alert: {},
      tabs: [],
      configurations: {},
      activeContentTabIndex: 0,
    };
  },
  mounted() {
    this.isLoading = false;
  },
  methods: {
    setData({ tabs, configurations, token }) {
      var hash = window.location.hash ? window.location.hash : '#tab-info=0';
      var hashNumber = hash.split('=')[1];
      var isNumber = !isNaN(hashNumber);
      var tabsMaxIndex = tabs.length - 1; //pois o index começa no zero e vai ser feita uma comparaçao log a baixo usando o index e a quantidade de Tabs

      if(isNumber && (hashNumber >= 0) && (hashNumber <= tabsMaxIndex)){
        tabs[Number(hashNumber)].active = true;
        this.activeContentTabIndex = Number(hashNumber);
      }

      this.tabs = tabs;
      this.configurations = configurations;
      this.token = token;
    },
    onChangeContentTab(newTabs) {
      const activeContentTabIndex = newTabs.findIndex(tab => tab.active);
      this.activeContentTabIndex = activeContentTabIndex;
      this.tabs = newTabs;
    },
    onAddService() {
      this.configurations.correios_servicos.push([]);
    },
    onRemoveService(serviceIndex) {
      const configurations = this.configurations;
      configurations.correios_servicos.splice(serviceIndex, 1);
      this.configurations = configurations;
    },
    onSubmit() {
      const form = this.$refs.form;
      const method = form.method;
      const url = form.action;
      const data = new FormData(form);

      this.btnSubmitLoading = true;
      this.disableForm = true;
      this.configurations.correios_invalid_credential = 0;

      axios({
        method,
        url,
        data,
      }).then(({ data }) => {
        console.log(data);
        const { warning, errors, success } = data;
        if (warning) {
          this.alert = {
            type: 'warning',
            message: warning
          }
        }
        if (errors) {
          this.$refs.validationObserver.setErrors(errors);

          this.alert = {
            type: 'error',
            message: 'Alguns campos estão incorretos. Corrija os campos em vermelho.'
          }
        }
        if (success) {
          this.alert = {
            type: 'success',
            message: success
          }
        }
      }).catch(() => {
        this.alert = {
          type: 'warning',
          message: 'Aconteceu algo de inesperado, por favor tente novamente!'
        }
      }).then(() => {
        this.disableForm = false;
        this.btnSubmitLoading = false;
      });
    },
    adminCodeTest() {
      const {correios_contrato_codigo, correios_contrato_senha, correios_postcode} = this.configurations;

      const info = Boolean(correios_contrato_codigo && correios_contrato_senha && correios_postcode);

      if (info) {
        axios({
          headers: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: 'post',
          url: 'index.php?route=shipping/correios/adminCodeTest&token=' + this.token,
          data: window.objectToParam({
            nCdEmpresa: this.configurations.correios_contrato_codigo,
            sDsSenha: this.configurations.correios_contrato_senha,
            sCepOrigem: this.configurations.correios_postcode
          }),
        })
        .then((response) => {
          if (response.data) {
            const erro = response.data.match(/<Erro>99<\/Erro>/);

            if (erro) {
              this.$refs.validationObserver.setErrors({correios_contrato_codigo: ['Código administrativo inválido.']});
            }
          }
        })
        .catch(()=>console.log('erro'));
      }
    }
  },
});

if (document.readyState === 'complete') {
  init();
} else {
  document.addEventListener('DOMContentLoaded', function() {
    init();
  });
}

function init() {
  vm.setData(DATA);
  vm.$mount('#root');
}
