class MessageElement extends HTMLElement {
  constructor() {
    super();
  }

  onClose(containerClass) {
    if (containerClass) {
      document.querySelector(`.${containerClass}`).innerHTML = "";
    }
  }

  connectedCallback() {
    const message = this.getAttribute("data-message") || "";
    const type = this.getAttribute("data-type") || "message";
    const isClose = (this.getAttribute("data-isclose") || "false") === "true";
    const containerClass = this.getAttribute("data-container-class") || "";

    const elem = document.createElement("div");
    elem.innerHTML = `
      <div class="message__container" style="${
        type === "error"
          ? "border: 1px solid #F34213; background-color: #FEE8E2"
          : "border: 1px solid #00A2AD; background-color: #E0F4F5"
      }">
        <span>${message}</span> ${
      isClose
        ? `<img class="popup__close" src="../../assets/images/close.png"/>`
        : ""
    }
      </div>
    `;

    this.appendChild(elem);

    if (isClose) {
      const closeButton = this.querySelector(".popup__close");
      closeButton.addEventListener("click", () => this.onClose(containerClass));
    }
  }
}

window.customElements.define("message-element", MessageElement);