/**
 * @mergeTarget
 * @module Src/Components/CheckboxButton
 */

import { TextsContainer } from "../containers/texts-container/texts-container";
import { CustomButton } from "../custom-button/custom-button";
import { CustomText } from "../custom-text/custom-text";
import { CustomSwitch } from "../inputs/switch/custom-switch";
import { CustomIcon } from "../custom-icon/custom-icon";
import { LisioBooleanParameterNames } from "@lisio/lisio-profils";
import {
  ProfileRenderObject,
  BooleanParameterRenderObject,
} from "../../screens/screen-types";
import { LisioComponent } from "@lisio/lisio-engine";
import { ElementsContainer } from "../containers/elements-container/elements-container";

/**
 * Class representing a checkbox button component extending a  button.\
 * It aims to represent a checkbox button component.\
 * A checkbox button component is basically a button which toggle a {@link Src/Components/CustomInput/CustomSwitch | CustomSwitch}.\
 */
class CheckboxButton extends CustomButton {
  /**
   * Private attribute to store input state
   * @source
   */
  private _isChecked: boolean;

  /**
   * Private attribute to store custom switch
   * @source
   */
  private _customSwitch: CustomSwitch;

  /**
   * Getter for attribute {@link _isChecked | _isChecked}
   * @returns Returns _isChecked attribute
   * @source
   */
  public get isChecked(): boolean {
    return this._isChecked;
  }

  /**
   * Constructor of class {@link CheckboxButton | CheckboxButton}
   * @param {ProfileRenderObject | BooleanParameterRenderObject} renderObject - Datas for button
   * @property {string} renderObject.buttonId - Id of the button
   * @property {string} renderObject.titleId - Id of the title text
   * @property {string | undefined} renderObject.subtitleId - Id of the subtitle text
   * @property {string | undefined} renderObject.activeTitleId - Id of the text when button is active
   * @property {string} renderObject.name - Name of the input
   * @property {boolean} renderObject.value - State of the input
   * @property {object | undefined} renderObject.icon - Icon object
   * @property {string} renderObject.icon.fileName - Icon file name
   * @property {string} renderObject.icon.iconName - Icon name
   * @property {string | undefined} renderObject.categoryName - Category name including this input
   * @property {string | undefined} renderObject.parentScreenName - Parent screen name in screen tree of category including this input
   * @property {string[] | undefined} renderObject.cssClasses - CSS classes
   * @property {object | undefined} renderObject.aria - Aria attributes object
   * @property {object | undefined} renderObject.aria.label - Aria label datas
   * @property {boolean | undefined} renderObject.aria.label.noTranslate - Indicates if label need to be translated
   * @property {string} renderObject.aria.label.id - Id of the text for aria label
   * @property {boolean | undefined} renderObject.aria.hidden - Aria hidden
   * @property {boolean | undefined} renderObject.aria.checked - Aria checked
   * @property {string | undefined} renderObject.additionalCss - Css classes given to the section containing the on/off and the input
   * @param {string} screenName - Screen name of category
   * @param {ElementsContainer | undefined} infobox - Infobox component
   * @source
   */
  constructor(
    {
      buttonId,
      titleId,
      subTitleId,
      activeTitleId,
      name,
      value,
      icon,
      categoryName,
      parentScreenName,
      cssClasses,
      aria,
      additionalCss,
      iconClasses,
    }: ProfileRenderObject | BooleanParameterRenderObject,
    screenName: string,
    infobox?: ElementsContainer,
  ) {
    const buttonChildren: LisioComponent[] = [];
    if (icon != undefined) {
      const iconClass: string[] = ["primary", "home-page-icon"];
      buttonChildren.push(
        new CustomIcon(
          icon.fileName,
          icon.iconName,
          iconClasses == undefined ? iconClass : iconClass.concat(iconClasses),
        ),
      );
    }
    const text = new CustomText(
      "label",
      value && activeTitleId != undefined ? activeTitleId : titleId,
      false,
      ["tall"],
      `${name}-input`.replace(/_/g, "-"),
    );
    const texts: LisioComponent[] = [text];
    if (subTitleId != undefined) {
      texts.push(new CustomText("p", subTitleId, false, ["small"]));
    }

    if (aria != undefined) {
      aria.checked = value;
      aria.label = { id: titleId };
    } else {
      aria = {
        checked: value,
        label: {
          id: titleId,
        },
      };
    }
    const stateTextClasses: string[] = ["regular", "capitalize"];
    if (value) {
      stateTextClasses.push("bold");
    }

    // const stateText: CustomText = new CustomText(
    //   "p",
    //   value ? "switch-active" : "switch-inactive",
    //   false,
    //   stateTextClasses,
    //   undefined,
    //   "lisio-" + buttonId + "-on-off",
    //   { hidden: true },
    // );

    super(
      buttonId,
      buttonChildren,
      (event) => {
        const isActive = !event.currentTarget.querySelector("input").checked;
        if (activeTitleId != undefined && isActive) {
          text.changeText(activeTitleId);
        } else if (activeTitleId != undefined && !isActive) {
          text.changeText(titleId);
        }
        this._customSwitch.toggleSwitch();
      },
      cssClasses,
      aria,
      "checkbox",
    );
    this._customSwitch = new CustomSwitch(
      name,
      value,
      // stateText,
      screenName,
      this,
      categoryName,
      parentScreenName,
      infobox,
    );
    this._isChecked = value;
    const containerCSS: string[] = ["row", "switch"];

    buttonChildren.push(
      new TextsContainer(texts, ["button-title-subtitle"]),
      new ElementsContainer(
        [
          this._customSwitch,
          // new TextsContainer([stateText])
        ],
        undefined,
        additionalCss == undefined
          ? containerCSS
          : containerCSS.concat(additionalCss),
      ),
    );
    if (name === LisioBooleanParameterNames.IS_ACTIVE) {
      window.addEventListener("changeAdaptationTitle", (event) => {
        this.addAttributes(
          "aria-checked",
          String((event as CustomEvent).detail),
        );
        if (activeTitleId != undefined && (event as CustomEvent).detail) {
          text.changeText(activeTitleId);
        } else if (
          activeTitleId != undefined &&
          !(event as CustomEvent).detail
        ) {
          text.changeText(titleId);
        }
        // stateText.changeText(
        //   (event as CustomEvent).detail
        //     ? "switch-active"
        //     : "switch-inactive"
        // );
      });
    }
  }
}

export { CheckboxButton };