import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["backgroundContainer", "modalContainer", "showModalTrigger"]
  static values = {
    showOnPageLoad: Boolean
  }

  connect() {
    if (this.showOnPageLoadValue == true) {
      this.show();
    }
  }

  showModalTriggerTargetConnected() {
    this.show()
  }

  toggleModalVisibility = (ev) => {
    ev.preventDefault();

    const invisible = this.backgroundContainerTarget.classList.contains('invisible');

    if (invisible) {
      this.show();
    } else {
      this.hide();
    }
  }

  hide() {
    this.toggleAttributes();

    setTimeout(() => {
      this.toggleVisibility();
    }, 300);
  }

  show() {
    this.toggleVisibility();
    this.toggleAttributes();
  }

  toggleVisibility() {
    this.backgroundContainerTarget.classList.toggle('invisible');
    this.backgroundContainerTarget.classList.toggle('visible');
  }

  toggleAttributes() {
    this.backgroundContainerTarget.classList.toggle('ease-out');
    this.backgroundContainerTarget.classList.toggle('ease-in');
    this.backgroundContainerTarget.classList.toggle('opacity-100');
    this.backgroundContainerTarget.classList.toggle('opacity-0');
    this.modalContainerTarget.classList.toggle('ease-out');
    this.modalContainerTarget.classList.toggle('ease-in');
    this.modalContainerTarget.classList.toggle('translate-y-4');
    this.modalContainerTarget.classList.toggle('sm:translate-y-0');
    this.modalContainerTarget.classList.toggle('sm:scale-95');
    this.modalContainerTarget.classList.toggle('translate-y-0');
    this.modalContainerTarget.classList.toggle('sm:scale-100');
    this.modalContainerTarget.classList.toggle('opacity-100');
    this.modalContainerTarget.classList.toggle('opacity-0');
    this.backgroundContainerTarget.classList.toggle('z-10');
    this.backgroundContainerTarget.classList.toggle('-z-10');
  }
};