import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["modal", "backdrop"];

  show(event = undefined) {
    event?.preventDefault();

    this.modalTarget.style.display = "block";
    this.backdropTarget.style.display = "block";
    this.modalTarget.setAttribute("role", "dialog");
    this.modalTarget.setAttribute("aria-modal", true);
    this.modalTarget.removeAttribute("aria-hidden");

    window.document.body.classList.add("modal-open");

    setTimeout(() => {
      this.modalTarget.classList.add("show");
      this.backdropTarget.classList.add("show");
    }, 1);
  }

  hide(event = undefined) {
    event?.preventDefault();

    this.backdropTarget.classList.remove("show");
    this.modalTarget.classList.remove("show");

    this.modalTarget.setAttribute("aria-hidden", true);
    this.modalTarget.removeAttribute("role");
    this.modalTarget.removeAttribute("aria-modal");

    setTimeout(() => {
      this.modalTarget.style.display = "";
      this.backdropTarget.style.display = "";
    }, 500);

    window.document.body.classList.remove("modal-open");
  }
}