import './style.css';
import './blocks/normalize.css';

const closePopupButtonSelector = '.popup__close';
const overlayPopupSelector = '.overlay';

const popupIDs = {
  singleplayer: '#popupSinglePlayer',
  multiplayer: '#multiplayer',
  realms: '#realms',
  options: '#options'
}

const buttonsIDs = {
  singleplayer: '#menuSinglePlayer',
  multiplayer: '#multiplayer',
  realms: '#realms',
  options: '#options'
}

document.addEventListener("DOMContentLoaded", () => {
  setCloseClickListiner(popupIDs, clickCloseHandler)
  setClickListiner(buttonsIDs, clickShowHandler)
});

function setClickListiner(ids, func) {
  for (const id in ids) {
    document.querySelector(ids[id])?.addEventListener('click', func)
  }
}

function setCloseClickListiner(ids, func) {
  for (const id in ids) {
    document.querySelector(`${ids[id]} ${closePopupButtonSelector}`)?.addEventListener('click', func)
  }
}

function clickCloseHandler(event) {
  const {target} = event
  const popupContainer = target.parentElement
  const overlay = document.querySelector(overlayPopupSelector)

  popupContainer.classList.toggle('hidden')
  overlay.classList.toggle('hidden')
}

function clickShowHandler(event) {
  const {target} = event
  const popupId = target.attributes.datatype.value
  const popupContainer = document.querySelector(`#${popupId}`)
  const overlay = document.querySelector(overlayPopupSelector)

  popupContainer.classList.toggle('hidden')
  overlay.classList.toggle('hidden')
}