import popup2025Styles from "../../assets/css/shadowroot/popup/lisio-2025-popup.css?raw";
import LisioIconController from "../../controllers/lisio-icons-controller";
import LisioTranslationController from "../../controllers/lisio-translation-controller";
import { LisioIconNames } from "../../enums/lisio-icon-names";
import { GlobalContext } from "../../global-context";
import { HasButtons, LisioPopup, popupStyles } from "../../popins/lisio-popin-factory";

class Lisio2025Popup extends LisioPopup {
  private _clientLogo?: string;
  private _flagIcon?: HTMLDivElement;

  protected _sideOffset = 10;

  constructor(
    colorPrimary: string,
    hasButtons: HasButtons,
    onCloseCallback: () => void,
    clientLogo?: string,
  ) {
    super(onCloseCallback);
    this._clientLogo = clientLogo;
    this._popupContainer.ariaModal = "false";
    this._popupContainer.role = "dialog";
    this._popupContainer.ariaLabel =
      LisioTranslationController.current.getTranslation("iframeTitle");
    this._popupContainer.classList.add("notranslate");

    if (!this._hidePopup) {
      this._iconListItems = [];
      if (hasButtons.hasTransButton) {
        this._iconListItems.push({
          iconName:
            LisioIconNames[
              LisioTranslationController.current?.currentLangISO?.toUpperCase() as keyof typeof LisioIconNames
            ] ?? LisioIconNames.FR,
          iconDims: { height: 25 },
          color: colorPrimary,
          lisioPanelInfoItemId: "translator",
          textId: "popin2025_popupTranslation",
          className: "openWidgetTranslatorLisio",
          isHidden: false,
        });
      }
      if (hasButtons.hasMainButton) {
        this._iconListItems.push({
          iconName: LisioIconNames.MAIN,
          iconDims: { height: 25 },
          color: colorPrimary,
          lisioPanelInfoItemId: "widget",
          textId: "popin2025_popupAccess",
          className: "openWidgetLisio",
          isHidden: false,
        });
      }
      if (hasButtons.hasEcoButton) {
        this._iconListItems.push({
          iconName: LisioIconNames.ECO,
          iconDims: { height: 25 },
          color: colorPrimary,
          lisioPanelInfoItemId: "eco",
          textId: "popin2025_popupEco",
          className: "openWidgetEcoLisio",
          isHidden: false,
        });
      }
      this._iconListItems.push({
        iconName: LisioIconNames.DEACTIVATE,
        iconDims: { height: 34, width: 34 },
        color: colorPrimary,
        lisioPanelInfoItemId: "management",
        textId: "managementTitle",
        className: "openWidgetLisio profileLisio",
        isHidden: true,
      });
    }
    window.addEventListener("lisio-lang-change", (event) => {
      if (event instanceof CustomEvent) {
        const { flagIso } = event.detail;
        this.changeTranslationFlag(flagIso);
      }
    });

    window.addEventListener("lisio-disabled", (event: Event) => {
      if (event instanceof CustomEvent) {
        const buttons =
          this._popupContainer.querySelectorAll("ul.popup-links li");
        for (const button of buttons) {
          button.classList.toggle("lisio-hidden");
        }
        this.topCorrection();
      }
    });
  }

  protected async getHTML(
    _justifyContentStartOrEnd: string,
    _borderSide: string,
    _colorPrimaryRGBA: string,
    colorPrimary: string,
  ) {
    const itemListHTML: string[] = [];
    for (const {
      iconName,
      iconDims,
      color,
      lisioPanelInfoItemId,
      textId,
      className,
      isHidden,
    } of this._iconListItems) {
      const item = await this.listItemBuilder(
        iconName,
        iconDims,
        color,
        lisioPanelInfoItemId,
        textId,
        className,
        isHidden,
      );
      itemListHTML.push(item);
    }
    //<div id="lisio-popup-info" aria-modal="false" role="dialog" aria-label="${trad.iframeTitle}">
    this._popup.id = "lisio-popup-info";
    const withLink = import.meta.env.VITE_LINK_POPUP === "true" && !GlobalContext.current.isMobile;
    // this._popup.style.top = `${posY}px`;
    //this._popup.style.height = `${popupHeight}px`;
    this._popup.innerHTML = `
      <div class="popup-header">
        <div class="popup-header-title-container">
          <p id="popup-header-title">${LisioTranslationController.current.getTranslation("popin2025_popupTitle")}</p>
          <p id="popup-header-subtitle">${LisioTranslationController.current.getTranslation("popin2025_popupSubtitle")}</p>
        </div>
        <div class="popup-header-image-container">
          ${this._clientLogo != undefined ? `<img src="${this._clientLogo}" alt="" role="presentation" />` : `${await LisioIconController.current.getIconHTML(LisioIconNames.HIPPO_AA, { width: 90, height: 90 }, "")}`}
        </div>
      </div>
      <div class="popup-content">
        <ul class="popup-links">
          ${itemListHTML.join("")}
        </ul>
        <button id="lisio-popup-info-close" aria-expanded="true" aria-controls="lisio-popup-info"><span>${LisioTranslationController.current.getTranslation("popin2025_popupClose")}</span><div>${await LisioIconController.current.getIconHTML(LisioIconNames.CROSS, { height: 15, width: 15 }, "", { color: colorPrimary })}</div></button>
      </div>
      <div class="popup-footer" style="color:${colorPrimary === "#005282" ? colorPrimary : "#646464"}">
        ${await LisioIconController.current.getIconHTML(LisioIconNames.LOGO_LISIO_MONOCHROME_NEW, { width: 55 }, "", { color: colorPrimary === "#005282" ? colorPrimary : "#646464", className: "logo-lisio" })}
        ${
          withLink
            ? `<a href="https://lisio.fr/inclusion-et-sobriete-numerique?origin=${window.lisioAccesskey}" rel="noopener" target="_blank">
          <span id="footer-text-popup" class="underline">${LisioTranslationController.current.getTranslation("popin2025_popupLisio")}</span>
          <span id="popup-new-tab" class="sr-only">&nbsp;-&nbsp;${LisioTranslationController.current.getTranslation("popin2025_newTab")}</span>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="10" height="10" viewBox="0 0 10 10" fill="none" class="newtab">
          <path d="M6.25 0a.62.62 0 1 0 0 1.25h1.62L3.93 5.18a.63.63 0 0 0 .89.89l3.93-3.94v1.62a.62.62 0 1 0 1.25 0V.62A.62.62 0 0 0 9.37 0H6.25ZM1.56.63C.7.63 0 1.32 0 2.19v6.25C0 9.3.7 10 1.56 10h6.25c.87 0 1.57-.7 1.57-1.56V6.25a.62.62 0 1 0-1.26 0v2.19c0 .17-.14.31-.3.31H1.55a.31.31 0 0 1-.31-.31V2.19c0-.17.14-.31.31-.31h2.19a.62.62 0 1 0 0-1.25H1.56Z" fill="currentColor"></path>
        </a>`
            : `<span id="footer-text-popup">${LisioTranslationController.current.getTranslation("popin2025_popupLisio")}</span>`
        }
      </div>
    `;

    this._flagIcon = this._popup.querySelector<HTMLDivElement>(
      "button.openWidgetTranslatorLisio div.popup-link-icon-container",
    ) as HTMLDivElement | undefined;
  }

  protected async listItemBuilder(
    iconName: LisioIconNames,
    dims: { height?: number; width?: number },
    color: string,
    lisioPanelInfoItemId: string,
    textId: string,
    className: string,
    isHidden: boolean,
  ) {
    return `
      <li class="${isHidden ? "lisio-hidden" : ""}">
        <button class="lisio-btn-${lisioPanelInfoItemId} ${className} notranslate">
            <div class="popup-link-icon-container">
              ${await LisioIconController.current.getIconHTML(iconName, dims, "popup")}
            </div>
            <p id="lisio-popup-info-${lisioPanelInfoItemId}" class="popup-link-text">${LisioTranslationController.current.getTranslation(textId)}</p>
            <div class="popup-link-right-carret">
                ${await LisioIconController.current.getIconHTML(LisioIconNames.RIGHT_CARRET, { height: 20 }, "", { color })}
            </div>
        </button>
      </li>
    `;
  }

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

const styles = `${popup2025Styles} ${popupStyles}`;

export { Lisio2025Popup, styles };