import Vue from 'vue';
import initVue from '@assets/js/initVue';
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: {},
      back: '',
      configurations: {},
      customerGroups: [],
    };
  },
  mounted() {
    this.isLoading = false;
  },
  methods: {
    setData({ configurations, customerGroups, back }) {
      this.configurations = configurations;
      this.customerGroups = customerGroups;
      this.back = back;
    },
    onAddIncrease() {
      this.configurations.acrescimo_tipo_pagamento = [
        ...this.configurations.acrescimo_tipo_pagamento,
        {
          modo_acrescimo: '',
          pagamento_acrescimo: '',
          prioridade_acrescimo: '',
          valor_minimo: 0,
          status_acrescimo: '',
          text_acrescimo: '',
          tabela_preco: [],
          val_acrescimo: 0,
        }
      ];
    },
    onRemoveIncrease(increaseIndex) {
      this.configurations.acrescimo_tipo_pagamento.splice(increaseIndex, 1);
    },
    onSubmit() {
      const paymentTypeIncrease = this.configurations.acrescimo_tipo_pagamento;
      const tablePriceNotExists = paymentTypeIncrease.some(item => item.tabela_preco.length == 0);

      if (tablePriceNotExists) {
        this.alert = {
          type: 'error',
          message: 'Algum dos módulo está sem uma tabela de preço selecionada.'
        }
        return;
      }

      const form = this.$refs.form;
      const url = form.action;
      const data = new FormData(form);

      this.btnSubmitLoading = true;
      this.disableForm = true;

      axios({
        method: 'post',
        url,
        data,
      }).then(({ data }) => {
        if (data.warning) {
          this.alert = {
            type: 'error',
            message: data.errors.warning
          }
        }
        if (data.errors) {
          this.$refs.validationObserver.setErrors(data.errors);
          this.alert = {
            type:'error',
            message: data.errors.message
          }
        }
        if (data.success) {
          window.location.href = this.back;
        }
      }).catch(() => {
        this.alert = {
          type: 'warning',
          message: 'Aconteceu algo de inesperado, por favor tente novamente!'
        }
      }).then(() => {
        this.disableForm = false;
        this.btnSubmitLoading = false;
      });
    },
    onChangeTablePrice(increaseIndex) {
      if (!event.target.checked) {
        return;
      }

      if (event.target.value == 0) {
        this.configurations.acrescimo_tipo_pagamento[increaseIndex].tabela_preco = [0];
      } else {
        const tablePrices = this.configurations.acrescimo_tipo_pagamento[increaseIndex].tabela_preco;
        const tablePriceAllIndex = tablePrices.findIndex(tablePrice => tablePrice == '0');

        if (tablePriceAllIndex !== -1) {
          this.configurations.acrescimo_tipo_pagamento[increaseIndex].tabela_preco.splice(tablePriceAllIndex, 1);
        }
      }
    }
  },
});

initVue(vm);