import Vue from 'vue';
import initVue from '@assets/js/initVue';
import seeKitProducts from '../../see-kit-products';
import axiosApi from '@assets/js/axios-api';
import param from '@assets/js/param';

const vm = new Vue({
  components: {
    BaseContent: () => import(/* webpackChunkName: "BaseContent" */ '@elements/BaseContent/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
    BaseModal: () => import(/* webpackChunkName: "BaseModal" */ '@components/BaseModal/index.vue'),
  },
  data() {
    return {
      products: {},
      qtdAtacado: null,
      isMob: false,
      showModal: false,
    };
  },
  methods: {
    setData({ products, futuraquantidadeatacado_status }) {
      this.products = products;
      this.qtdAtacado = parseInt(futuraquantidadeatacado_status);
    },
    limitText(text, maxLength) {
      if (text) {
        if (text.length > maxLength) {
          return text.substring(0, maxLength) + '...';
        }
        return text;
      }
    },
    resize() {
      if (window.innerWidth < 992) this.isMob = true;
      window.addEventListener('resize', () => {
        if (window.innerWidth < 992) this.isMob = true;
        else this.isMob = false;
      });
    },
    modal() {
      this.showModal = !this.showModal;
    },
    removeItem(id, removeAll) {
      axiosApi({
        method: 'POST',
        url: 'index.php?route=account/wishlist/removeItem',
        data: param({ filters: id, removeAll: removeAll }),
      })
        .then(({ data }) => {
          if (data === 'removeItem') {
            const index = this.products.findIndex(item => item.product_id == id);
            this.products.splice(index, 1);
            document.querySelectorAll('.js-total-wish-list')[0].textContent = document.querySelectorAll('.js-total-wish-list')[0].textContent - 1;
            notificationMsg('Item removido da sua lista de desejos com sucesso!', 'success');
            if (this.products.length === 0) {
              this.products = 0;
            }
          }
          if (data === 'removeAll') {
            this.products = 0;
            document.querySelectorAll('.js-total-wish-list')[0].textContent = 0;
            this.modal();
            notificationMsg('Todos os itens foram removidos com sucesso!', 'success');
          }
        })
        .catch(err => console.log(err, err.response));
    },
    addQuantity(id) {
      setTimeout(() => {
        axiosApi({
          method: 'POST',
          url: 'index.php?route=account/wishlist/addQuantity',
          data: param({ filters: id }),
        })
          .then(({ data }) => {
            if (data) {
              this.products.map(item => {
                if (item.product_id === id) {
                  item.notification_value = data;
                }
              });
            }
          })
          .catch(err => console.log(err, err.response));
      }, 1000);
    },
  },
  watch: {},
  mounted() {
    window.waitEvent('window', function() {
      seeKitProducts();
    });
    this.resize();
  },
});

initVue(vm);
