import styles from "../../assets/css/shadowroot/popin/lisio-popin-2024.css?raw";
import LisioIconController from "../../controllers/lisio-icons-controller";
import { LisioIconNames } from "../../enums/lisio-icon-names";
import LisioPopinNames from "../../enums/lisio-popin-names";
import {
  Lisio2024Popup,
  styles as popupStyles,
} from "../../popups/models/lisio-2024-popup";
import {
  HasButtons,
  LisioPopin,
  LisioTranslationController,
} from "../lisio-popin-factory";
import { GlobalContext } from "../../global-context.ts";

class LisioPopin2024 extends LisioPopin {
  constructor(
    popinName: string,
    colorPrimary: string,
    colorEco: string,
    hasButtons: HasButtons,
    hasPopup: boolean,
    isSafeTrans: boolean,
  ) {
    super(popupStyles, colorPrimary, colorEco, LisioPopinNames.POPIN2024, {
      backgroundColor: popinName.includes("close") ? colorPrimary : "#888",
      color: "#fff",
      direction: "column-reverse",
    });
    if (hasButtons.hasMainButton) {
      this._buttonsMenus.push({
        iconName: LisioIconNames.MAIN,
        iconDims: { height: 28 },
        className: "openWidgetLisio",
        menu: "accessibility-screen",
        lisioButtonId: "widget",
        titleId: "lisioBtnWidget",
        color: "#fff",
      });
    }
    if (hasButtons.hasTransButton) {
      this._buttonsMenus.push({
        iconName: isSafeTrans
          ? LisioIconNames.SAFE_TRANS
          : LisioIconNames.TRANS,
        iconDims: { height: 28 },
        className: "openWidgetTranslatorLisio",
        menu: "translation-screen",
        lisioButtonId: "translator",
        titleId: "lisioBtnTranslator",
        color: "#fff",
      });
    }
    if (hasButtons.hasEcoButton) {
      this._buttonsMenus.push({
        iconName: LisioIconNames.ECO,
        iconDims: { height: 26 },
        className: "openWidgetEcoLisio",
        menu: "eco-screen",
        lisioButtonId: "eco",
        titleId: "lisioBtnEco",
        color: "#fff",
      });
    }
    if (hasButtons.hasHelpButton) {
      this._buttonsMenus.push({
        iconName: LisioIconNames.HELP,
        iconDims: { height: 26 },
        className: "openLinkLisio",
        menu: "https://www.youtube.com/watch?v=ALYFgGJ8ORU",
        lisioButtonId: "help",
        titleId: "lisioBtnLink",
        color: "#fff",
      });
    }

    if (hasPopup && this._showHideController?.isShow) {
      this._popup = new Lisio2024Popup(colorPrimary, hasButtons, isSafeTrans);
    }
  }

  public async getHTMLDesktop() {
    const itemListHTML: string[] = [];
    for (const {
      iconName,
      iconDims,
      titleId,
      lisioButtonId,
      color,
      className,
      menu,
    } of this._buttonsMenus) {
      const func =
        iconName === LisioIconNames.HELP
          ? this.getAnchorHTML.bind(this)
          : this.getButtonHTML.bind(this);
      const html = await func(
        iconName,
        iconDims,
        titleId,
        lisioButtonId,
        color,
        className,
        menu,
      );
      itemListHTML.push(html);
    }

    return `
      <ul id="lisio-popin-button-list">
          ${itemListHTML.join("")}
      </ul>
      ${await LisioIconController.current.getIconHTML(LisioIconNames.LOGO, { height: 33 }, "popin")}`;
  }

  public async initialize(mobileIconName: LisioIconNames) {
    this.startPopin();
    if (GlobalContext.current.isMobile) {
      //const height = 50;
      this._popinContainer.innerHTML = await this.getHTMLMobile(mobileIconName);
    } else {
      this._popinContainer.innerHTML = await this.getHTMLDesktop();
    }
  }

  protected async getHTMLMobile(mobileIconName: LisioIconNames) {
    this._popinContainer.classList.add("openWidgetLisio", "notranslate");
    this._popinContainer.role = "button";
    this._popinContainer.tabIndex = 0;
    this._popinContainer.ariaLabel =
      LisioTranslationController.current.getTranslation("lisioBtnWidget");
    this._popinContainer.title =
      LisioTranslationController.current.getTranslation("lisioBtnWidget");
    return `
      ${await LisioIconController.current.getIconHTML(
        mobileIconName,
        { height: 40 },
        "popin",
        { color: this._colorPrimary },
      )}
    `;
  }
}

export { LisioPopin2024, styles };