export const el = function (el = 'div') {
  let f = document.createElement(el) as HTMLElement
  return f
}

export const OpenGlobalEvent = function (event) {
  event.stopPropagation()
  let target = event.target as HTMLElement
  if (target.tagName === 'IMG' && target.className == 'popup-image') {
    let imgE = el('img')
    imgE.style.width = 'auto%'
    imgE.style.display = 'inline-block'
    imgE.style.margin = 'auto'
    imgE.style.marginTop = '20px'
    imgE.style.marginBottom = '20px'
    imgE.setAttribute('src', target.getAttribute('src'))
    imgE.style.height = '80vh'

    let popUpConteiner = el('div')
    popUpConteiner.style.position = 'fixed'
    popUpConteiner.style.display = 'flex'
    popUpConteiner.style.justifyItems = 'center'
    popUpConteiner.style.alignItems = 'center'
    popUpConteiner.style.zIndex = '1024'
    popUpConteiner.style.width = '100vw'
    popUpConteiner.style.height = '100vh'
    popUpConteiner.style.padding = '20px'
    popUpConteiner.style.top = '0'
    popUpConteiner.style.left = '0'
    popUpConteiner.style.overflow = 'auto'
    popUpConteiner.style.background = 'rgba(0,0,0,.5)'
    let imgContainer = el('div').appendChild(imgE)
    imgContainer.style.padding = '20px'
    imgContainer.style.display = 'inline-block'
    imgContainer.style.height = 'auto'
    imgContainer.style.position = 'reltive'
    imgContainer.className = 'bg-white rounded shadow-xl'
    let closeD = document.createElement('div') as HTMLElement
    closeD.innerHTML = `x`
    closeD.className = `x-m-l font-sans bg-white rounded shadow-xl`
    closeD.style.position = `fixed`
    closeD.style.display = `flex`
    closeD.style.justifyContent = `center`
    closeD.style.alignItems = `center`
    closeD.style.right = `30px`
    closeD.style.top = `30px`
    closeD.style.cursor = `pointer`
    closeD.style.padding = `5px`
    closeD.style.width = `50px`
    closeD.style.height = `50px`
    closeD.style.textAlign = `center`
    closeD.style.fontSize = `2rem`
    popUpConteiner.appendChild(closeD)
    popUpConteiner.appendChild(imgContainer)

    popUpConteiner.onclick = function (e) {
      let contain = e.target as HTMLElement
      if (
        contain.tagName === 'DIV' &&
        contain.className.indexOf('x-m-l') == -1
      ) {
        contain.remove()
      }
      if (
        contain.tagName === 'DIV' &&
        contain.className.indexOf('x-m-l') != -1
      ) {
        let f = contain.parentNode as HTMLElement
        f.remove()
      }
    }
    // console.log(popUpConteiner)
    document.body.appendChild(popUpConteiner)
  }
}