import Modal from './modal';
import { $ } from '@utils';
import axios from 'axios';
import { updateCartCounter } from './catalog';
import { reachGoal } from './yandexCounter';

const itemTemplate = '<li class="modal__order-item" data-id="{ID}">\n' +
  '                        <h4><a href="{URL}">{TITLE}</a></h4>\n' +
  '                        <div class="card-buttons__quant">\n' +
  '                            <button class="card-buttons__quant-hand">-</button>\n' +
  '                            <button class="card-buttons__quant-hand">+</button>\n' +
  '                            <input type="text" min="0" placeholder="1" value="{QUANTITY}" data-id="{ID}" class="js-cart-quantity" />\n' +
  '                        </div>\n' +
  '                        <button class="modal__order-remove js-remove-from-cart" data-id="{ID}">\n' +
  '                            <svg class="icon" width="11" height="11" viewBox="0 0 11 11">\n' +
  '                                <use xlink:href="/wp-content/themes/innodrive/assets/sprite/sprite.svg#icon-close"></use>\n' +
  '                            </svg>\n' +
  '                        </button>\n' +
  '                    </li>';

export const updateFormState = (count) => {
  if (count > 0) {
    $('.modal__order-form').classList.remove('js-hidden');
    $('.cart-header').classList.remove('js-cart-is-empty');
  } else {
    $('.modal__order-form').classList.add('js-hidden');
    $('.cart-header').classList.add('js-cart-is-empty');
  }
};

const initCart = () => {
  const itemsList = $('.modal__order-list');
  const modalElement = $('#modal-cart');

  const spinner = $('.spinner').spinner;

  if (!modalElement) { return }

  const CartModal = new Modal(modalElement, {
    trigger: $('.user-nav__button--cart'),
    onClose: () => {
      // Nothing
    },
    onOpen: () => {
      if (typeof window.smartCaptcha !== undefined) {
        window.smartCaptcha.reset();
      }
      reachGoal('OpenCart');
      itemsList.innerHTML = '';
      $('#cartForm').classList.remove('js-hidden');
      $('#cartFormHolder .modal__response').classList.add('js-hidden');

      spinner.run();

      axios.get('/wp-json/cart/items?lang=' + window.currentLanguage)
        .then(function (res) {
          spinner.stop();

          if (res.data.status === 'ok') {
            updateCartCounter(res.data.count);
            updateFormState(res.data.count);

            const prefix = window.currentLanguage == 'ru' ? '' : '/' + window.currentLanguage;

            if (res.data.count) {
              res.data.products.forEach((item) => {
                let row = itemTemplate;
                row = row.split('{ID}').join(item.id);
                row = row.split('{TITLE}').join(item.name);
                row = row.split('{QUANTITY}').join(item.quantity);
                row = row.split('{URL}').join(prefix + item.link);
                itemsList.insertAdjacentHTML('beforeEnd', row);
              });
            } else {
            // Nothing
            }
          }
        })
        .catch((err) => {
          spinner.stop();
        });
    }
  });

  $('.js-close-cart-modal').addEventListener('click', (ev) => {
    ev.stopPropagation();
    ev.preventDefault();

    CartModal.close();
  });

  $('.js-save-order').addEventListener('click', (ev) => {
    ev.preventDefault();
    ev.stopPropagation();

    $('#cartSelfEmail').value = 1;
    $('#cartWithCart').value = 1;
    $('#cartForm').dispatchEvent(new Event('submit', {cancelable: true }));

    return false;
  });

  $('.js-send-order').addEventListener('click', (ev) => {
    ev.preventDefault();
    ev.stopPropagation();

    $('#cartSelfEmail').value = 0;
    $('#cartWithCart').value = 1;
    $('#cartForm').dispatchEvent(new Event('submit', {cancelable: true }));

    return false;
  });
};

export default () => {
  initCart();
};