class Modal {
  constructor() {
    //selecting DOM elements in the constructor
    this._modal = document.querySelector('#modal');
    this._modalBtn = document.querySelector('#modal-btn');
    this.addEventListeners(); //so that this functions runs right away
  }

  //add all event listeners in a function
  addEventListeners() {
    // this._modalBtn.addEventListener('click', this.open.bind(this)); //takes an event and call back function as parameter
    this._modalBtn.addEventListener('click', () => {
      this.open();
    }); //takes an event and call back function as parameter
    window.addEventListener('click', this.outsideClick.bind(this)); //takes an event and call back function as parameter
    // receiving event from IdeaForm and running a call back function
    document.addEventListener('closemodal', () => this.close());
  }

  //class methods
  open() {
    this._modal.style.display = 'block';
  }

  close() {
    this._modal.style.display = 'none';
  }

  outsideClick(e) {
    if (e.target === this._modal) {
      this.close();
    }
  }
}

export default Modal;