class BesPopupEl extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }

  connectedCallback() {
    this.render()
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          position: relative;
          display: inline-block;
          z-index: -1
        }
        :host(.show){
          z-index: 10;
        }
        .popup-text {
          max-width: 160px;
          color: black;
          text-align: center;
          padding: 8px 0;
          z-index: 1;
        }
        .bes-popup-container {
          visibility: hidden;
          max-width: 300px;
          bacground-color: rgb(47, 50, 55);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          border-radius: 5px;
          padding: 8px;
        }
        .bes-toolbar {
          display: flex;
          justify-content: end;
          padding: 5px 2px;
        }
        .bes-toolbar button {
          margin-right: 2px;
        }
        .bes-text-div{
          background-color: white;
          padding: 10px;
          border-radius: 5px;
        }
        :host(.show) .bes-popup-container {
          visibility: visible;
          animation: fadeIn 1s;
        }
        @keyframes fadeIn {
          from {opacity: 0;}
          to {opacity:1 ;}
        }
      </style>
      <div class="bes-popup-container">
        <div class="bes-toolbar">
          <button class="bes-close-btn">X</button>
        </div>
        <div class="bes-text-div">
          <span class="popup-text">
            Tole je testni popup
          </span>
        </div>
      </div>
    `
  }

  show(x, y) {
    y = y + 20
    this.style.position = 'fixed'
    this.style.left = `${x}px`
    this.style.top = `${y}px`
    this.classList.add('show')
  }

  hide() {
    this.classList.remove('show')
  }

  changeText(text) {
    this.shadowRoot.querySelector('.popup-text').textContent = text
  }
}

customElements.define('bes-popup-el', BesPopupEl)