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

import * as filters from '@assets/js/filters';
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],
  filters: {
    ...filters,
  },
  data() {
    return {
      isLoading: true,
      btnSubmitLoading: false,
      disableForm: false,
      alert: {},
      urlDelete: '',
      urlShow: '',
      page: '',
      configurations: {},
      faixaceps: [],
      form: {},
      checkedAllFaixaCep: false,
      faixaCepIdToDelete: [],
    };
  },
  mounted() {
    this.isLoading = false;
  },
  watch: {
    checkedAllFaixaCep(newValue) {
      if (newValue) {
        const allFaixaCep = this.faixaceps.map(faixaCep => faixaCep.faixa_cep_id);
        this.faixaCepIdToDelete = allFaixaCep;
      } else {
        this.faixaCepIdToDelete = [];
      }
    },
    faixaCepIdToDelete(newValue) {
      if (newValue.length === 0) {
        this.checkedAllFaixaCep = false;
      }
      if (newValue.length === this.faixaceps.length) {
        this.checkedAllFaixaCep = true;
      }
    }
  },
  methods: {
    setData({ page, configurations, urlDelete, urlShow, faixaceps }) {
      this.page = page;
      this.configurations = configurations;
      this.faixaceps = faixaceps;
      this.urlDelete = urlDelete;
      this.urlShow = urlShow;
    },
    onShowFaixaCep(id) {
      this.isLoading = true;
      const url = this.urlShow;

      const data = new FormData();
      data.append('faixa_cep_id', id);

      axios({
        method: 'post',
        url,
        data,
      }).then(({ data }) => {
        if (data.warning) {
          this.alert = {
            type: 'warning',
            message: data.warning
          }
        } else {
          this.form = data;
          this.onChangePage('add');
        }
      }).catch(() => {
        this.alert = {
          type: 'warning',
          message: 'Aconteceu algo de inesperado, por favor tente novamente!'
        }
      }).then(() => {
        this.isLoading = false;
      });
    },
    onChangePage(page) {
      this.page = page;
      if (page == 'faixaceps') {
        this.form = {};
      }
    },
    onDeleteFaixaCep() {
      const faixaCepIds = this.faixaCepIdToDelete;

      if (faixaCepIds.length == 0) {
        alert('Nenhuma faixa de cep selecionada!');
        return;
      }

      if (!confirm('Deseja continuar? As faixas de CEP selecionadas serão excluidas.')) {
        return;
      }

      const url = this.urlDelete;
      const data = new FormData();
      faixaCepIds.map(id => {
        data.append('selected[]', id);
      });

      axios({
        method: 'post',
        url,
        data,
      }).then(({ data }) => {
        const { warning, success } = data;
        if (warning) {
          this.alert = {
            type: 'warning',
            message: warning
          }
        }
        if (success) {
          location.reload();
        }
      }).catch(() => {
        this.alert = {
          type: 'warning',
          message: 'Aconteceu de inesperado, por favor tente novamente!'
        }
      });
    },
    onSaveFaixaCep(faixaCepId) {
      const form = this.$refs.formFaixaCep;
      const method = form.method;
      const url = faixaCepId ? form.dataset.actionEdit + faixaCepId : form.dataset.actionInsert;
      const data = new FormData(form);

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

      axios({
        method,
        url,
        data,
      }).then(({ data }) => {
        const { warning, errors, success } = data;
        if (warning) {
          this.alert = {
            type: 'warning',
            message: warning
          }
        }
        if (errors) {
          this.$refs.faixaCepValidationObserver.setErrors(errors);
        }
        if (success) {
          location.reload();
        }
      }).catch(() => {
        this.alert = {
          type: 'warning',
          message: 'Aconteceu de inesperado, por favor tente novamente!'
        }
      }).then(() => {
        this.btnSubmitLoading = false;
        this.disableForm = false;
      });
    },
    onSaveConfig() {
      const form = this.$refs.formConfig;
      const method = form.method;
      const url = form.action;
      const data = new FormData(form);

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

      axios({
        method,
        url,
        data,
      }).then(({ data }) => {
        const { warning, errors, success }= data;
        if (warning) {
          this.alert = {
            type: 'warning',
            message: warning
          }
        }
        if (errors) {
          this.$refs.configValidationObserver.setErrors(errors);
        }
        if (success) {
          this.alert = {
            type: 'success',
            message: success
          }
          this.page = 'faixaceps';
        }
      }).catch(() => {
        this.alert = {
          type: 'warning',
          message: 'Aconteceu de inesperado, por favor tente novamente!'
        }
      }).then(() => {
        this.disableForm = false;
        this.btnSubmitLoading = false;
      });
    }
  },
});

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

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