import { CustomButton } from "../custom-button/custom-button";
import { CustomIcon } from "../custom-icon/custom-icon";
import { CustomText } from "../custom-text/custom-text";
import { ScreenManager } from "../../../managers/screen-manager";
import { LisioComponentStyles } from "@lisio/lisio-engine";
import { customButtonStyles } from "../custom-button/custom-button.css";

class BackButton extends CustomButton {
  /**
   * Private attribute to store a reference to the screen to go to when clicked
   * @source
   */
  private _backScreen: string;

  /**
   * Private attribute to store the subtitle id corresponding to the right subtitle to display
   * @source
   */
  private _subtitleId: string;

  /**
   * Private attribute to store a reference to the subtitle element
   * @source
   */
  private _textElement: CustomText;

  /**
   * This function updates the back button with a new text inside, and a new screen to go to
   * @param {string} newScreenSubTitleId - Id of the new text to display
   * @param {string} newBackScreen - name of the new back screen to display when clicked
   * @source
   */
  public updateBackButton(newScreenSubTitleId: string, newBackScreen: string) {
    this._subtitleId = newScreenSubTitleId;
    this._backScreen = newBackScreen;
    this._textElement.changeText(this._subtitleId);
  }

  /**
   * This function hides the back button by adding to it a "d-none" class
   * @source
   */
  public hideBackButton() {
    this.addClasses(["d-none"]);
  }

  /**
   * This function shows the back button by removing from it a "d-none" class
   * @source
   */
  public showBackButton() {
    this.removeClasses(["d-none"]);
  }

  /**
   * Constructor of class {@link BackButton | BackButton}
   * @param {string} id - Id of the component
   * @param {string} subtitleId - Id of the contained text
   * @param {string} backScreen - Name of the screen to go to when clicked
   * @param {string[] | undefined} cssClasses - CSS classes of component
   * @param {object | undefined} aria - Aria attributes
   * @property {object | undefined} aria.label - Aria label datas
   * @property {boolean | undefined} aria.label.noTranslate - Indicates if label need to be translated
   * @property {string} aria.label.id - Id of the text for aria label
   * @property {boolean | undefined} aria.hidden - Aria hidden
   * @property {string | undefined} aria.controls - Arria controls
   * @property {boolean | undefined} aria.checked - Aria checked
   * @property {boolean | undefined} aria.hasPopup - Aria hasPopup
   * @param {"checkbox" | "link" | "spinbutton" | "tab" | undefined} role - Role attribute of the button
   * @param {"-1" | "0" | undefined} tabindex - tabindex pf the button
   * @param {object[] | undefined} otherEventHandlers - Other event handlers
   * @property {string} otherEventHandlers.triggerer - Triggerer of the event
   * @property {(...args: any) => void} otherEventHandlers.handler - Handler of the event
   * @source
   */
  constructor(
    id: string,
    subtitleId: string,
    backScreen: string,
    cssClasses?: string[],
    aria?: {
      label?: {
        noTranslate?: boolean;
        id: string;
      };
      hidden?: boolean;
      controls?: string;
      checked?: boolean;
      hasPopup?: string;
      describedby?: string;
    },
    role?: "checkbox" | "link" | "spinbutton" | "tab",
    tabindex?: "-1" | "0",
    otherEventHandlers?: {
      triggerer: string;
      handler: (...args: any) => void;
    }[],
  ) {
    const backArrow = new CustomIcon("header-icons", "Back", ["black"]);

    const screenSubTitle: CustomText = new CustomText(
      "p",
      subtitleId,
      undefined,
      ["regular"],
    );

    super(
      id ? id : "back-button-" + subtitleId,
      [backArrow, screenSubTitle],
      (e) => {
        ScreenManager.current.changeScreen(this._backScreen, e.detail);
      },
      cssClasses
        ? [...cssClasses, "btn-back", "btn-outline-grey"]
        : ["btn-pill", "btn-back", "transparent", "btn-outline-grey"],
      aria,
      role,
      tabindex,
      otherEventHandlers,
    );

    this._subtitleId = subtitleId;
    this._backScreen = backScreen;
    this._textElement = screenSubTitle;
  }
}

new LisioComponentStyles(CustomButton.name, customButtonStyles);

export { BackButton };