import { LisioBooleanParameterNames } from "@lisio/lisio-profils";

import styles from "../../assets/css/shadowroot/modal/lisio-confirmation-modal.css?raw";
import LisioMessageManager from "../../managers/lisio-message-manager";
import { LisioBlurController } from "../lisio-blur-controller";
import LisioModalController from "../lisio-modal-controller";
import LisioShadowRootController from "../lisio-shadow-root-controller";
import { LisioWidgetController } from "../lisio-widget-controller";
import LisioTranslationController from "../lisio-translation-controller";

class LisioConfirmationModal extends LisioModalController {
  private _buttonNo: HTMLButtonElement;
  private _buttonYes: HTMLButtonElement;
  private _description: HTMLParagraphElement;
  private _firstText: HTMLParagraphElement;
  private _isEnabled = false;
  private _listeners: Map<
    HTMLButtonElement,
    Map<string, (event: Event) => void>
  > = new Map<HTMLButtonElement, Map<string, (event: Event) => void>>();

  constructor() {
    super(
      "lisio-modal-container",
      "lisio-confirmation-modal-title",
      "confirmation-modal-title",
      false,
    );

    this._description = document.createElement("p");
    this._description.id = "lisio-modal-description-text";

    this._firstText = document.createElement("p");
    this._firstText.id = "lisio-modal-first-text";
    this._firstText.innerHTML =
      LisioTranslationController.current.getTranslation(
        "confirmation-modal-text",
      );

    this._buttonYes = document.createElement("button");
    this._buttonYes.id = "lisio-modal-button-yes";
    this._buttonYes.innerHTML =
      LisioTranslationController.current.getTranslation(
        "confirmation-modal-yes-button",
      );
    this._buttonYes.setAttribute(
      "aria-describedby",
      "lisio-modal-description-text",
    );

    this._buttonNo = document.createElement("button");
    this._buttonNo.id = "lisio-modal-button-no";
    this._buttonNo.innerHTML =
      LisioTranslationController.current.getTranslation(
        "confirmation-modal-no-button",
      );

    // this._buttonNo.setAttribute("data-focus", parameterName);//widget and close button

    const buttonContainer = document.createElement("div");
    buttonContainer.id = "lisio-modal-button-container";
    buttonContainer.appendChild(this._buttonNo);
    buttonContainer.appendChild(this._buttonYes);

    this._modalBody.appendChild(this._firstText);
    this._modalBody.append(buttonContainer);
    this._modalBody.append(this._description);

    this._closeButton?.addEventListener("click", () => {
      this._buttonNo.click();
    });

    this._listeners.set(
      this._buttonYes,
      new Map<string, (event: Event) => void>(),
    );
    this._listeners.set(
      this._buttonNo,
      new Map<string, (event: Event) => void>(),
    );
    LisioShadowRootController.current.addStyles(styles);
    window.addEventListener("lisio-lang-change", () => {
      this._firstText.innerHTML =
        LisioTranslationController.current.getTranslation(
          "confirmation-modal-text",
        );
      this._buttonYes.innerHTML =
        LisioTranslationController.current.getTranslation(
          "confirmation-modal-yes-button",
        );
      this._buttonNo.innerHTML =
        LisioTranslationController.current.getTranslation(
          "confirmation-modal-no-button",
        );
    });
  }

  public get buttonNo() {
    return this._buttonNo;
  }

  public get closeButton() {
    return this._closeButton;
  }

  public get logo() {
    return this._logo;
  }

  public get buttonYes() {
    return this._buttonYes;
  }

  public get isEnabled() {
    return this._isEnabled;
  }

  public attachEventListenerOnButtons(
    button: HTMLButtonElement,
    eventName: string,
    listener: (event: Event) => void,
  ) {
    const eventListeners = this._listeners.get(button);
    if (eventListeners != undefined) {
      eventListeners.set(eventName, listener);
      button.addEventListener(eventName, listener);
    }
  }

  public changeTexts(descriptionText: string) {
    this._description.innerHTML = descriptionText;
  }

  public closeModal() {
    super.closeModal();
    this._isEnabled = false;
    this.deactivateFocusTrap();
  }

  public detachEventListenerOnButtons(
    button: HTMLButtonElement,
    eventName: string,
  ) {
    const eventListeners = this._listeners.get(button);
    if (eventListeners != undefined) {
      const eventListener = eventListeners.get(eventName);
      if (eventListener != undefined) {
        eventListeners.delete(eventName);
        button.removeEventListener(eventName, eventListener);
      }
    }
  }

  public noHandler(
    event: Event,
    widget: LisioWidgetController,
    parameterName:
      | LisioBooleanParameterNames.BOOK_PAGE
      | LisioBooleanParameterNames.READING_MODE,
  ) {
    event.stopPropagation();
    this.detachEventListenerOnButtons(this.buttonYes, "click");
    this.detachEventListenerOnButtons(this.buttonNo, "click");
    //this.iframe.style.pointerEvents = "";
    LisioMessageManager.current.sendPopupResponse(
      false,
      parameterName,
      this._buttonNo.dataset.focus,
    );
    this.closeModal();
    if (!widget.isOpen) {
      LisioBlurController.current.disableBlur();
    }
  }

  public openModal() {
    super.openModal();
    this._isEnabled = true;
  }

  public yesHandler(
    event: Event,
    widget: LisioWidgetController,
    parameterName:
      | LisioBooleanParameterNames.BOOK_PAGE
      | LisioBooleanParameterNames.READING_MODE,
  ) {
    event.stopPropagation();
    this.detachEventListenerOnButtons(this.buttonYes, "click");
    this.detachEventListenerOnButtons(this.buttonNo, "click");
    LisioMessageManager.current.sendPopupResponse(true, parameterName);
    widget.closeWidget();
    this.closeModal();
    LisioBlurController.current.disableBlur();
  }
}

export default LisioConfirmationModal;