export class Alert {
  constructor({ id, color, icon, message, delay = 4000, isManualClose, width = 'auto' }) {

    const wrapper = document.createElement("div");
    const alert = document.createElement("div");
    wrapper.appendChild(alert)

    const closeIcon = document.createElement("i");
    closeIcon.className = `ri-close-circle-fill cursor-pointer text-${color}-800 text-xl`;
    closeIcon.onclick = () => {
      this.destroy()
    }

    alert.className = `bg-${color}-100 bg-light shadow-md rounded-lg py-5 px-6 mb-3 text-base text-${color}-700 inline-flex items-center fixed transition_up top-0 translate-y-4 left-0 w-fit slideInFromTop border border-${color}-300 gap-4 flex items-center`;
    alert.style.zIndex = "10000";
    alert.style.width = width
    alert.style.transform = "translateY(-5rem) translateX(calc(50vw - 50%))";
    alert.setAttribute("role", "alert");
    alert.innerHTML = `
      <div class="w-fit gap-1 flex items-center">
        ${icon}
        ${typeof message === 'string' ? message : JSON.stringify(message)}
      </div>
    `;
    alert.appendChild(closeIcon);
    document.getElementById(id).appendChild(wrapper);

    setTimeout(() => {
      if (delay > 100 && alert) {
        alert.style.transform =
          "translateY(1.25rem) translateX(calc(50vw - 50%))";
      }
    }, 300);

    setTimeout(() => {
      if(!isManualClose) {
        this.destroy()
      }
    }, delay)

    this.alert = alert;
    this.wrapper = wrapper;
  }
  destroy() {
    if (this.alert) {
      this.alert.style.transform =
        "translateY(-5rem) translateX(calc(50vw - 50%))";
      setTimeout(() => {
        this.wrapper.innerHTML = "";
        this.alert = null;
      }, 300);
    }
  }
}