import { isElement, extend, stringToElement } from "./lib/utils";

export default class Modal {
  constructor(modal = '.modal-overlay', userConfig = {}) {
    //If there are multiple elements create a new instance for each of them
    if (typeof menu === 'string') {
      const elements = document.querySelectorAll(modal);
      if (elements.length > 1) {
        for (let i = 1; i < elements.length; i++) {
          const el = elements[i];
          new Modal(el, userConfig);
        }
      }
    }

    //Merge config with UserConfig
    const defaultConfig = {
      silent: false,
      animationDuration: 300,
      closeButtonClass: 'close-modal',
      overlayClass: 'modal-overlay',
      contentClass: 'modal-content',
      modalParent: 'body'
    };
    this.config = extend(defaultConfig, userConfig);

    const modalParent =  document.querySelector(this.config.modalParent);
    if (!isElement(modalParent)) {
      this._error('modalParent does not exists');
      return;
    }

    this.modal = typeof modal === 'string' ? document.querySelector(modal) : modal;
    if (!isElement(this.modal)) {
      this._createModal();
    }

    this.closeButton = this.modal.querySelector(`.${this.config.closeButtonClass}`);
    this.modalContent = this.modal.querySelector(`.${this.config.contentClass}`);

    this.close = this.close.bind(this);
    this.destroy = this.destroy.bind(this);

    this.locked = false;

    //Let's start
    this.init();
  }

  /*========================================
  =           Public Functions             =
  =========================================*/

  /**
   * Initialize the plugin
   */
  init() {
    this._addEventListener();
  }

  /**
   * hide the modal
   */
  close() {
    this.modal.classList.remove('active');
  }

  /**
   * delete modal from DOM
   */
  destroy() {
    document.querySelector(this.config.modalParent).removeChild(this.modal);
    this.modal.classList.remove('active');
  }

  /**
   *
   */
  open() {
    this.modal.classList.add('active');
    return this;
  }

  /**
   *
   * @param content
   */
  append(content = '') {
    this.modalContent.innerHTML = content;
    return this;
  }

  /*========================================
  =           Private Functions            =
  =========================================*/

  /**
   * Create modal element and add it in the dom
   * @param content
   * @private
   */
  _createModal(content = "") {
    const modalString = `
      <div class="${this.config.overlayClass}">
        <div class="${this.config.closeButtonClass}">close</div>
        <div class="${this.config.contentClass} scroll-zone"> ${content} </div>
      </div>
    `;

    this.modal = stringToElement(modalString);
    const modalParent =  document.querySelector(this.config.modalParent);
    modalParent.appendChild(this.modal);
  }

  /**
   *
   * @private
   */
  _addEventListener() {
    this.modal.addEventListener('click', this.destroy, false);
    this.closeButton.addEventListener('click', this.destroy, false);
    this.modalContent.addEventListener('click', (e) => {
      e.stopPropagation();
    })
  }

  /**
   * @param {String} message
   * @private
   */
  _error(message) {
    if (!this.config.silent) {
      console.error(message);
    }
  }
}