import styles from "../../assets/css/shadowroot/popin/lisio-popin-2025.css?raw";
import LisioIconController from "../../controllers/lisio-icons-controller";
import { LisioIconNames } from "../../enums/lisio-icon-names";
import LisioPopinNames from "../../enums/lisio-popin-names";
import {
  Lisio2025Popup,
  styles as popupStyles,
} from "../../popups/models/lisio-2025-popup";
import { HasButtons, LisioPopin } from "../lisio-popin-factory";

class LisioPopin2025 extends LisioPopin {
  private _currentIso = "fr";
  private _flagIcon?: HTMLButtonElement;
  private hasHippoLogo;

  constructor(
    _popinName: string,
    colorPrimary: string,
    colorEco: string,
    iconName: LisioIconNames,
    hasButtons: HasButtons,
    hasPopup: boolean,
    _isSafeTrans: boolean,
    hasHippoLogo: boolean,
    clientLogo?: string,
  ) {
    super(popupStyles, colorPrimary, colorEco, LisioPopinNames.POPIN2025, {backgroundColor: "#fff", color: "#555", direction: "column"});

    if (hasButtons.hasTransButton) {
      this._buttonsMenus.push({
        iconName,
        iconDims: { width: 28 },
        className: "openWidgetTranslatorLisio",
        menu: "translation-screen",
        lisioButtonId: "translator",
        titleId: "lisioBtnTranslator",
        color: "",
        svgClassname: "trans-flag",
      });
    }
    if (hasButtons.hasMainButton) {
      this._buttonsMenus.push({
        iconName: LisioIconNames.MAIN,
        iconDims: { height: 30 },
        className: "openWidgetLisio",
        menu: "accessibility-screen",
        lisioButtonId: "widget",
        titleId: "lisioBtnWidget",
        color: this._colorPrimary,
      });
    }
    if (hasButtons.hasEcoButton) {
      this._buttonsMenus.push({
        iconName: LisioIconNames.ECO,
        iconDims: { height: 26 },
        className: "openWidgetEcoLisio",
        menu: "eco-screen",
        lisioButtonId: "eco",
        titleId: "lisioBtnEco",
        color: this._colorPrimary,
      });
    }
    this.hasHippoLogo = hasHippoLogo;

    if (hasPopup && this._showHideController?.isShow) {
      this._popup = new Lisio2025Popup(
        colorPrimary,
        hasButtons,
        this.showPopin.bind(this),
        clientLogo,
      );
    }

    if (
      !this._popup?.hidePopup &&
      hasPopup &&
      this._showHideController?.isShow
    ) {
      this._popinContainer.classList.add("lisio-hidden");
      this._showHideController.showHideIcon.classList.add("lisio-hidden");
    }

    window.addEventListener("lisio-lang-change", (event) => {
      if (event instanceof CustomEvent) {
        const { flagIso } = event.detail;
        if (this._currentIso != flagIso) {
          this.changeTranslationFlag(flagIso);
          this._currentIso = flagIso;
        }
      }
    });
  }

  public async initialize() {
    this.startPopin();
    this._popinContainer.innerHTML = await this.getHTML();
    this._flagIcon = this._popinContainer.querySelector<HTMLButtonElement>(
      "button.openWidgetTranslatorLisio",
    ) as HTMLButtonElement | undefined;
  }

  public showPopin() {
    this._popinContainer.classList.remove("lisio-hidden");
    this._showHideController?.showHideIcon?.classList?.remove("lisio-hidden");
  }

  protected async getHTML(): Promise<string> {
    const itemListHTML: string[] = [];
    for (const {
      iconName,
      iconDims,
      titleId,
      lisioButtonId,
      color,
      className,
      svgClassname,
    } of this._buttonsMenus) {
      const html = await this.getButtonHTML(
        iconName,
        iconDims,
        titleId,
        lisioButtonId,
        color,
        className,
        svgClassname,
      );
      itemListHTML.push(html);
    }
    return `
      <ul id="lisio-popin-button-list">
          ${itemListHTML.join("")}
      </ul>
      
      ${this.hasHippoLogo ? await LisioIconController.current.getIconHTML(LisioIconNames.LOGO, { height: 30 }, "popin", { className: "hippo-logo" }) : ""}`;
  }

  private async changeTranslationFlag(flagIso: string) {
    const iconName = Object.keys(LisioIconNames).includes(
      flagIso.toUpperCase(),
    );
    if (this._flagIcon instanceof HTMLButtonElement && iconName != undefined) {
      this._flagIcon.innerHTML = await LisioIconController.current.getIconHTML(
        flagIso.toLowerCase() as LisioIconNames,
        { width: 28 },
        "",
        { className: "trans-flag" },
      );
    }
  }
}

export { LisioPopin2025, styles };