class PopupElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });
    const template = document.createElement("template");
    template.innerHTML = /*html*/ `
      <style>
        .popup__backdrop{
          width: 100vw;
          height: 100vh;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(201, 201, 201, 0.4);
          -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(4px);
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          z-index: 2;
          animation: fadeIn 0.3s ease-in-out forwards;
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }

        @keyframes fadeOut {
          from {
            opacity: 1;
          }
          to {
            opacity: 0;
          }
        }

        .popup__container{
          width: fit-content;
          height: fit-content;
          padding: 16px;
          background-color: white;
          box-shadow: 0px 4px 12px 0px #0000001A;
          border-radius: 8px;
          min-width: 300px;
        }

        .popup__header{
          display: flex;
          width: 100%;
          justify-content: space-between;
        }

        .popup__header_text{
          font-size: 20px;
          font-weight: 500;
        }

        .popup__close{
          cursor: pointer;
        }
      </style>
      <div class="popup__backdrop">
        <div class="popup__container">
          <div class="popup__header">
            <div class="popup__header_text"></div>
            <div><img class="popup__close" src="../../assets/images/close.png"/></div>
          </div>
          <div class="popup_component">
            <slot>
          </div>
        </div>
      </div>
    `;
    shadow.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {
    const shadow = this.shadowRoot;
    const id = this.getAttribute("data-id");
    const header = this.getAttribute("data-header");

    shadow.querySelector(".popup__backdrop").id = id || "";
    shadow.querySelector(".popup__header_text").textContent = header || "";

    const backdrop = shadow.querySelector(".popup__backdrop");
    const closeIcon = shadow.querySelector(".popup__close");

    closeIcon.addEventListener("click", () => {
      backdrop.style.animation = "fadeOut 0.3s ease-in-out forwards";
      setTimeout(() => {
        backdrop.remove();
      }, 300);
    });
  }
}

window.customElements.define("popup-element", PopupElement);