import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

export default class Modal {
  constructor (element, opt) {
    let modal = this;

    this.defaultOptions = {
      onOpen: () => {},
      onClose: () => {},
      trigger: null
    };

    this.classes = {
      SHOWN: 'js-shown',
      LINK_ACTIVE: 'js-current'
    };

    this.selectors = {
      CLOSE_BUTTON: '.modal__close'
    };

    this.element = element;
    let obj = this.element;

    this.options = Object.assign({}, this.defaultOptions, opt);
    const closeButton = element.querySelector(this.selectors.CLOSE_BUTTON);

    closeButton.addEventListener('click', (evt) => {
      evt.preventDefault();
      evt.stopPropagation();
      modal.close();
    });

    if (this.options.trigger !== null) {
      let list = [];
      if (NodeList.prototype.isPrototypeOf(this.options.trigger)) {
        list = [ ...this.options.trigger ];
      } else {
        list.push(this.options.trigger);
      }

      list.forEach((item) => {
        item.addEventListener('click', (evt) => {
          evt.preventDefault();
          evt.stopPropagation();

          disableBodyScroll(obj);
          obj.classList.add(modal.classes.SHOWN);

          if (item.dataset.id) {
            const productIdInput = this.element.querySelector('[name="productId"]');
            if (productIdInput) {
              productIdInput.value = item.dataset.id;
            }

            const productNameHeader =  this.element.querySelector('.page-heading span');
            const productNameContainer = item.closest('.product-card').querySelector('.js-product-card__title');
            const productNameValue = productNameContainer ? productNameContainer.innerText : item.closest('.page').querySelector('.js-product-card__title').innerText;
            if (productNameHeader && productNameValue) {
              productNameHeader.innerText = productNameValue;

              const subjectInput = this.element.querySelector('[name="subject"]');
              subjectInput.value = subjectInput.value + ' ' + productNameValue;
            }
          }

          const hamburgerContainer = document.querySelector('.main-header__hamburger');

          if (hamburgerContainer && hamburgerContainer.hamburger.opened) {
            hamburgerContainer.hamburger.close();
          }

          if (typeof this.options.onOpen === 'function') {
            modal.options.onOpen();
          }
        });
      });
    }
  };

  close () {
    const modal = this;
    if (typeof modal.options.onClose === 'function') {
      modal.options.onClose();
    }

    modal.element.classList.remove(modal.classes.SHOWN);
    enableBodyScroll(modal.element);
  }
}