import styles from "../assets/css/shadowroot/lisio-show-hide.css?raw";
import { LisioPopin } from "../popins/lisio-popin";
import LisioTranslationController from "./lisio-translation-controller";

class LisioShowHideController {
  private _colorStyle: string;
  private _isShow = true;
  private _popin: LisioPopin;
  private _showHideIcon: HTMLElement;

  constructor(
    popin: LisioPopin,
    backgroundColor: string,
    color: string,
    direction: "column" | "column-reverse",
  ) {
    this._showHideIcon = document.createElement("div");
    this._showHideIcon.id = "show-hide-icon";
    this._showHideIcon.tabIndex = 0;
    this._showHideIcon.setAttribute("role", "button");
    this._showHideIcon.classList.add("notranslate");
    this._showHideIcon.setAttribute("aria-controls", "popin");
    this._showHideIcon.addEventListener("click", () => {
      this.showHide();
    });
    this._showHideIcon.style.background = backgroundColor;
    this._showHideIcon.addEventListener("keydown", (event) => {
      if (event.isComposing || event.key === "Enter") {
        this.showHide();
      }
    });
    this._colorStyle = `
      #show-hide-icon:after {
        background: ${color};
      }

      #show-hide-icon:before {
        background: ${color};
      }

      div#lisio-popin-container{
        flex-direction: ${direction};
      }
    `;
    this._popin = popin;
    this.initialize();
    window.addEventListener("lisio-lang-change", () => {
      LisioTranslationController.current.translateShowHide(
        this._showHideIcon,
        this._isShow ? "hidePopin" : "showPopin",
      );
    });
  }

  public get colorStyle() {
    return this._colorStyle;
  }

  public get isShow() {
    return this._isShow;
  }

  public get showHideIcon(): HTMLElement {
    return this._showHideIcon;
  }

  public focusIcon() {
    document.querySelector("#show-hide-icon");
  }

  public initialize() {
    const rawExpiration = localStorage.getItem("lisio-hidePopIn");
    if (rawExpiration != undefined) {
      const { expiration } = JSON.parse(rawExpiration);
      const expirationDate = new Date(expiration);
      if (Date.now() < expirationDate.getTime()) {
        this._showHideIcon.setAttribute(
          "aria-label",
          LisioTranslationController.current.getTranslation("showPopin"),
        );
        this.showHide();
      } else {
        localStorage.removeItem("lisio-hidePopIn");
      }
    }
    this._showHideIcon.setAttribute(
      "aria-expanded",
      this._isShow ? "false" : "true",
    );
    LisioTranslationController.current.translateShowHide(
      this._showHideIcon,
      this._isShow ? "hidePopin" : "showPopin",
    );
  }

  public showHide() {
    this._isShow = !this._isShow;
    this._popin?.showHidePopin();
    this._showHideIcon.style.transform = this._isShow
      ? "rotate(0deg)"
      : "rotate(45deg)";
    this._showHideIcon.setAttribute("aria-expanded", String(this._isShow));
    LisioTranslationController.current.translateShowHide(
      this._showHideIcon,
      this._isShow ? "hidePopin" : "showPopin",
    );
    const rawExpiration = localStorage.getItem("lisio-hidePopIn") as
      | string
      | undefined;
    if (this._isShow) {
      localStorage.removeItem("lisio-hidePopIn");
    } else if (rawExpiration == undefined) {
      const expirationDate = new Date();
      expirationDate.setDate(
        expirationDate.getDate() +
          Number(import.meta.env.VITE_EXPIRATION_POPIN),
      );
      const hidePopIn = {
        expiration: expirationDate.toISOString(),
      };
      localStorage.setItem("lisio-hidePopIn", JSON.stringify(hidePopIn));
    }
  }
}

export { LisioShowHideController, styles };