import LisioModalController from "../lisio-modal-controller";
import LisioShadowRootController from "../lisio-shadow-root-controller";
import dicoModalStyles from "../../assets/css/shadowroot/modal/lisio-dico-modal.css?raw";
import { LisioBlurController } from "../lisio-blur-controller";
import LisioTranslationController from "../lisio-translation-controller";

type word = {
  word: string;
  syl: string;
  values: {
    [key: string]: string[];
  };
};

class LisioDicoModal extends LisioModalController {
  private _contentSection: HTMLElement;
  private _listeners: Map<
    HTMLButtonElement,
    Map<string, (event: Event) => void>
  > = new Map<HTMLButtonElement, Map<string, (event: Event) => void>>();

  protected _triggerer?: HTMLElement;

  protected _notFoundText?: HTMLElement;

  public set triggerer(triggerer: HTMLElement) {
    this._triggerer = triggerer;
  }

  constructor() {
    super(
      "lisio-dico-modal-container",
      "lisio-dico-title",
      "dictionary-modal-title",
      true,
    );

    const modalContent = document.createElement("div");
    modalContent.classList.add("lisio-dico-modal-content");

    this._modalBody.appendChild(modalContent);

    (this._modalContainer.querySelector(
      ".lisio-modal-close-button",
    ) as HTMLElement)!.addEventListener("click", () => {
      this.closeModal();
    });

    this._contentSection = this._modalContainer.querySelector(
      ".lisio-dico-modal-content",
    )!;
    LisioShadowRootController.current.addStyles(dicoModalStyles);
  }

  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 openModal() {
    super.openModal();
  }

  public closeModal() {
    super.closeModal();
    this.deactivateFocusTrap();
    LisioBlurController.current.disableBlur();
  }

  public changeContent(formatedData?: word[]) {
    if (formatedData) {
      this._contentSection!.innerHTML = `
        ${formatedData
          .map(
            (word: word) => `
            ${Object.keys(word.values)
              .map(
                (key) => `<div class="lisio-dico-modal-words">
                <p><span>${word.word}</span> - ${key} - <span class="lisio-dico-phonetic">${word.syl}</span></p>
                <div>
                  ${word.values[key]
                    .map(
                      (def: string, index: number) => `
                      <p><span>${index + 1}. </span>${def}</p>
                    `,
                    )
                    .join("")}  
                </div>
              </div>`,
              )
              .join("")}
            `,
          )
          .join("")}
      `;
      if (this._modalContainer.id === "lisio-dico-modal-container") {
        if (
          this._contentSection.offsetHeight >
          this._modalContainer.offsetHeight -
            (this._modalContainer.querySelector(
              ".lisio-modal-header",
            ) as HTMLElement)!.offsetHeight
        ) {
          (
            this._modalContainer.querySelector(
              ".lisio-modal-body",
            ) as HTMLElement
          ).classList.add("overflow-y-scroll");
        } else {
          (
            this._modalContainer.querySelector(
              ".lisio-modal-body",
            ) as HTMLElement
          ).classList.remove("overflow-y-scroll");
        }
      }
      this._notFoundText = undefined;
    } else {
      this._contentSection.innerHTML = `<p class="lisio-dico-not-found">${LisioTranslationController.current.getTranslation("dico-no-definition-found")}</p>`;
      this._notFoundText = this._contentSection.querySelector(
        ".lisio-dico-not-found",
      )!;
    }

    window.addEventListener("lisio-lang-change", () => {
      LisioTranslationController.current.translateDicoModal(this._notFoundText);
    });
  }

  public deactivateFocusTrap() {
    super.deactivateFocusTrap();
    if (this._triggerer) {
      if (this._triggerer.tabIndex === -1) {
        this._triggerer.setAttribute("tabindex", "-1");
      }
      this._triggerer.focus();
    }
  }
}

export default LisioDicoModal;