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

  async connectedCallback() {
    const message = this.getAttribute("data-message") || "";
    const type = this.getAttribute("data-type") || "message";
    const isClose = this.getAttribute("data-isclose") || "false";
    const containerClass = this.getAttribute("data-container-class") || "";
    const elem = document.createElement("div");
    elem.innerHTML = /*html*/ `
      <div class="alert__holder">
        <div class="alert__container ${isClose === "true" ? "fade-in" : ""}">
          <message-element
            data-message = "${message}"
            data-isclose = 'true'
            data-type = '${type}'
            data-container-class = '${containerClass}'
          ></message-element>
        </div>
      </div>
    `;

    this.appendChild(elem);

    if (isClose === "true") {
      setTimeout(() => {
        const alertContainer = this.querySelector(".alert__container");
        if (alertContainer) {
          alertContainer.classList.remove("fade-in");
          alertContainer.classList.add("fade-out");
          setTimeout(() => {
            this.remove();
          }, 500);
        }
      }, 8000);
    }
  }
}

window.customElements.define("alert-element", AlertElement);