import styles from "../assets/css/shadowroot/lisio-blur.css?raw";
import LisioShadowRootController from "./lisio-shadow-root-controller";

class LisioBlurController {
  private static _current: LisioBlurController;

  private _blur: HTMLDivElement;
  private _isActive = false;

  private constructor() {
    this._blur = document.createElement("div");
    this._blur.id = "lisio-blur";
    this._blur.classList.add("lisio-hidden");
    LisioBlurController._current = this;
  }

  public static get current() {
    if (!this._current) {
      this._current = new LisioBlurController();
    }
    return this._current;
  }

  public get blur(): HTMLDivElement {
    return this._blur;
  }

  public get isActive() {
    return this._isActive;
  }

  public disableBlur() {
    const modals = Array.from(
      LisioShadowRootController.current.root.querySelectorAll(
        ".lisio-modal-container",
      ),
    ).filter((el) => el.classList.contains("active"));
    if (modals.length === 0) {
      this._blur.classList.add("lisio-hidden");
    }
  }

  public enableBlur() {
    this._blur.classList.remove("lisio-hidden");
  }

  public goOnBack() {
    const modals = Array.from(
      LisioShadowRootController.current.root.querySelectorAll(
        ".lisio-modal-container",
      ),
    ).filter((el) => el.classList.contains("active"));
    if (modals.length === 0) {
      this._blur.style.zIndex = "";
      this._blur.classList.remove("lisio-visible-blur");
    }
  }

  public goOnTop() {
    this._blur.style.zIndex = "1073741824";
    this._blur.classList.add("lisio-visible-blur");
  }
}

export { LisioBlurController, styles };