import popupTriangle from "../../assets/css/shadowroot/popup/base/lisio-2024-popup-triangle.css?raw";
import popup2024Styles from "../../assets/css/shadowroot/popup/base/lisio-2024-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 { HasButtons, LisioPopup, popupStyles } from "../../popins/lisio-popin-factory";

class Lisio2024Popup extends LisioPopup {
  private _triangleContainer: HTMLElement;

  protected _sideOffset = 52;

  constructor(
    colorPrimary: string,
    hasButtons: HasButtons,
    isSafeTrad: boolean,
  ) {
    super(() => {
      console.log("close popup");
    });
    this._triangleContainer = document.createElement("div");
    this._popupContainer.prepend(this._triangleContainer);
    this._popupContainer.id = "lisio-popup-container";

    if (!this._hidePopup) {
      this._iconListItems = [];
      if (hasButtons.hasMainButton) {
        this._iconListItems.push({
          iconName: LisioIconNames.MAIN,
          iconDims: { height: 35 },
          color: colorPrimary,
          lisioPanelInfoItemId: "widget",
          textId: "popinAccess",
          className: "",
          isHidden: false,
        });
      }
      if (hasButtons.hasTransButton) {
        this._iconListItems.push({
          iconName: isSafeTrad
            ? LisioIconNames.SAFE_TRANS
            : LisioIconNames.TRANS,
          iconDims: { height: isSafeTrad ? 35 : 40 },
          color: colorPrimary,
          lisioPanelInfoItemId: "translator",
          textId: "popinTrad",
          className: "",
          isHidden: false,
        });
      }
      if (hasButtons.hasEcoButton) {
        this._iconListItems.push({
          iconName: LisioIconNames.ECO,
          iconDims: { height: 34 },
          color: colorPrimary,
          lisioPanelInfoItemId: "eco",
          textId: "popinEco",
          className: "",
          isHidden: false,
        });
      }
    }
  }

  public closePopUp(): void {
    super.closePopUp();
    this._triangleContainer.remove();
  }

  protected async getHTML(
    justifyContentStartOrEnd: string,
    borderSide: string,
    colorPrimaryRGBA: string,
    colorPrimary: string,
    isCompensation: boolean,
  ) {
    const itemListHTML: string[] = [];
    for (const {
      iconName,
      iconDims,
      color,
      lisioPanelInfoItemId,
      textId,
    } of this._iconListItems) {
      const item = await this.listItemBuilder(
        iconName,
        iconDims,
        color,
        lisioPanelInfoItemId,
        textId,
      );
      itemListHTML.push(item);
    }

    this._triangleContainer.id = "lisio-triangle-container";
    this._triangleContainer.classList.add(justifyContentStartOrEnd);
    this._triangleContainer.innerHTML = `<div id="lisio-triangle" class="${borderSide}" style="border-${borderSide}-color : rgba(${colorPrimaryRGBA}, 1);"></div>`;

    this._popup.id = "lisio-popup-info";
    // this._popup.style.top = `${posY}px`;
    //this._popup.style.height = `${popupHeight}px`;
    this._popup.style.borderColor = `${colorPrimary}B3`;
    this._popup.innerHTML = `
    <button class="notranslate" id="lisio-popup-info-close" aria-expanded="true" aria-controls="lisio-popup-info" aria-label="${LisioTranslationController.current.getTranslation(
      "closePopUp",
    )}"></button>
        <div id="lisio-popup-info-container">
          <div id="lisio-popup-info-icon-container">
          ${await LisioIconController.current.getIconHTML(LisioIconNames.LOGO, { height: 60 }, "popup")}
          </div>
          <div id="lisio-popup-info-title-container" style = "width: 80%;">
            <p id="lisio-popup-info-title" >${LisioTranslationController.current.getTranslation(
              "popinTitle",
            )}</p>
          </div>
        </div>
        <ul id="lisio-popup-info-icons-container">
						${itemListHTML.join("")}
				</ul>
        ${
          isCompensation
            ? `<div id="lisio-div-popup-compensation">${await LisioIconController.current.getIconHTML(
                LisioIconNames.TREE,
                { height: 34 },
                "",
                { color: "#888" },
              )} <p id="lisio-compensation-text">${LisioTranslationController.current.getTranslation(
                "popupCompensation",
              )}</p> </div>`
            : ""
        }
    `;
  }

  protected async listItemBuilder(
    iconName: LisioIconNames,
    iconDim: { height?: number; width?: number },
    color: string,
    lisioPanelInfoItemId: string,
    textId: string,
  ) {
    return `
      <li class="lisio-popup-info-icons-item">
          <div class="lisio-popup-info-icons-item-icon-container">
            ${await LisioIconController.current.getIconHTML(iconName, iconDim, "", { color })}
          </div>
          <div class="lisio-popup-info-icons-item-text-container">
              <p id="lisio-popup-info-${lisioPanelInfoItemId}" class="lisio-popup-info-icons-item-text">
                ${LisioTranslationController.current.getTranslation(textId)}
              </p>
          </div>
      </li>
    `;
  }
}

const styles = `${popupStyles} ${popup2024Styles} ${popupTriangle}`;

export { Lisio2024Popup, styles };