/**
 * Section: VAT Exemption Modal
 * ------------------------------------------------------------------------------
 * A VAT Exemption file that contains scripts to function.
 *
 * @namespace vatExemptionModal
 */
import Cookies from 'js-cookie';
import cssClasses from '../helpers/cssClasses';
import {register} from '@shopify/theme-sections';
import {on} from '../helpers/utils';
import AjaxCart from '../helpers/ajax-cart';
import Modal from '../components/modal';

/**
 * DOM selectors.
 */
const selectors = {
  modal: 'vat-exemption-modal',
  addToCart: '[js-vat-exemption="addToCart',
  charityAddToCart: '[js-vat-exemption="charityAddToCart"]',
  continueShopping: '[js-vat-exemption="continueShopping"]',
  form: '[js-product-form="container"]',
  section: '[js-vat-exemption="section"]',
  tabControl: '[js-vat-exemption="tabControl"]',
  tabContent: '[js-vat-exemption="tabContent"]',
  buttonGroups: '[js-vat-exemption="buttonGroups"]',
  input: '[name="properties[VAT Relief]"]',
  condition: '[js-vat-exemption="condition"]',
  charity: '[js-vat-exemption="charity"]',
};

/**
 * Register the `vat-exemption-modal` section type.
 */
register('vat-exemption-modal', {

  /**
   * DOM node selectors.
   */
  setNodeSelectors() {
    this.form = null;
    this.target = null;

    this.nodeSelectors = {
      modal: document.querySelector(selectors.modal),
      form: document.querySelector(selectors.form),
      addToCart: document.querySelector(selectors.addToCart),
      charityAddToCart: document.querySelector(selectors.charityAddToCart),
      continueShopping: document.querySelector(selectors.continueShopping),
      buttonGroups: document.querySelector(selectors.buttonGroups),
      sections: [...document.querySelectorAll(selectors.section)],
      tabControls: [...document.querySelectorAll(selectors.tabControl)],
      tabContents: [...document.querySelectorAll(selectors.tabContent)],
      condition: document.querySelector(selectors.condition),
      charity: document.querySelector(selectors.charity),
    };
  },

  /**
   * Construct the modal.
   */
  constructModal() {
    this.modal = new Modal(selectors.modal);
  },

  /**
   * Initiate component.
   */
  init() {
    this.setNodeSelectors();
    this.constructModal();
    this.setTriggerEvents();

    this.settings = {
      namespace: 'vat_relief',
    };

    this.modal.init();
  },

  /**
   * Set trigger listeners.
   */
  setTriggerEvents() {
    Frame.EventBus.listen('AjaxCart:exemptItem:attempted', (target) => this.handleExemptAttempt(target));

    this.nodeSelectors.tabControls.forEach((control) => {
      on('click', control, (event) => this.handleTabSelection(event));
    });

    on('click', this.nodeSelectors.addToCart, (event) => {
      this.handleAddToCart(event);
    });

    on('click', this.nodeSelectors.charityAddToCart, (event) => {
      this.handleCharityAddToCart(event);
    });

    on('click', this.nodeSelectors.continueShopping, (event) => {
      this.handleContinueShopping(event);
    });
  },

  /**
   * Handle changing the selected tab
   * @param {object} event - Click and key down event.
   */
  handleTabSelection(event) {
    this.nodeSelectors.sections.forEach((control) => {
      control.classList.remove(cssClasses.active);
      control.lastElementChild.style.height = '0px';
    });
    event.currentTarget.closest(selectors.section).classList.add(cssClasses.active);
    var content = event.currentTarget.nextElementSibling;
    var newHeight = content.children[0].offsetHeight;
    content.style.height = newHeight + 'px';
  },

  /**
   * Handle add to cart event and set loading state.
   * @param {object} event - Click and key down event.
   */
  handleAddToCart(event) {
    event.preventDefault();

    this.closeModal();
    this.setExemptProperty();

    AjaxCart().submitForm(this.target, this.form);
  },

  /**
   * Handle charity add to cart event and set loading state.
   * @param {object} event - Click and key down event.
   */
  handleCharityAddToCart(event) {
    event.preventDefault();

    if (this.nodeSelectors.charity.value) {
      this.closeModal();
      this.setCharityExemptProperty();

      AjaxCart().submitForm(this.target, this.form);
    }
  },

  /**
   * Handle continue shopping event.
   * @param {object} event - Click and key down event.
   */
  handleContinueShopping(event) {
    event.preventDefault();

    this.closeModal();
  },

  /**
   * Handle the exempt add attempt.
   */
  handleExemptAttempt(target) {
    this.form = target.closest('form');
    this.target = target;

    if (!this.form) {
      throw new Error('Form element is required.');
    }

    this.openModal();
  },

  /**
   * Set the exempt property.
   */
  setExemptProperty() {
    var condition = this.nodeSelectors.condition.value.replace( /[\r\n]+/gm, "" );
    var input = this.form.querySelector(selectors.input);
    input.value = 'I declare that I am eligible for VAT relief. ' +
      'MEDICAL CONDITION: ' + condition
    Cookies.set(this.settings.namespace, input.value, {expires: 365});
  },

  /**
   * Set the charity exempt property.
   */
  setCharityExemptProperty() {
    var charity = + this.nodeSelectors.charity.value.replace( /[\r\n]+/gm, "" );
    var input = this.form.querySelector(selectors.input);
    input.value = 'I am purchasing this item on behalf of a registered ' +
      'charity. REGISTERED CHARITY NUMBER: ' + charity
    Cookies.set(this.settings.namespace, input.value, {expires: 365});
  },

  /**
   * Open the modal.
   */
  openModal() {
    this.modal.show();
  },

  /**
   * Close the modal.
   */
  closeModal() {
    this.modal.close();
  },

  /**
   * Callback function when section is loaded via 'sections.load()' or by the Theme Editor 'shopify:section:load' event.
   */
  onLoad() {
    this.init();
  },
});