/**
 * @mergeTarget
 * @module Src/Components/CategoryComponent
 */

import { TextsContainer } from "../containers/texts-container/texts-container";
import { CustomButton } from "../custom-button/custom-button";
import { CustomIcon } from "../custom-icon/custom-icon";
import { CustomText } from "../custom-text/custom-text";
import { CategoryRenderObject } from "../../screens/screen-types";
import { ScreenManager } from "../../../managers/screen-manager";
import { LisioComponent } from "@lisio/lisio-engine";
import { ElementsContainer } from "../containers/elements-container/elements-container";

/**
 * Class representing a category component extending a  button.\
 * It aims to represent a category component.\
 * A category component is basically a button which redirect on another screen.\
 */
class CategoryComponent extends CustomButton {
  /**
   * Public method to tic the category button when a sub component is active
   * @param {boolean} isActive - Indicates if a sub component of the category is active
   * @returns Returns nothing
   * @source
   */
  public setActive(isActive: boolean): void {
    if (isActive) {
      this.addClasses(["active"]);
    } else {
      this.removeClasses(["active"]);
    }
  }

  /**
   * Constructor of class {@link CategoryComponent | CategoryComponent}
   * @param {CategoryRenderObject} categoryRenderObject - Object containing datas about category button
   * @property {string} categoryRenderObject.buttonId - Id of the button
   * @property {string} categoryRenderObject.nextScreenName - Next screen name
   * @property {string} categoryRenderObject.titleId - Id of the title text
   * @property {string | undefined} categoryRenderObject.subtitleId - Id of the subtitle text
   * @property {object | undefined} categoryRenderObject.icon - Icon object
   * @property {string} categoryRenderObject.icon.fileName - Icon file name
   * @property {string} categoryRenderObject.icon.iconName - Icon name
   * @property {boolean} categoryRenderObject.isActive - Indicates if category button is active or not
   * @property {string[]} categoryRenderObject.iconsClasses - CSS icon classes
   * @property {string[]} categoryRenderObject.firstIconClasses - CSS first icon classes
   * @property {string[]} categoryRenderObject.cssClasses - CSS classes
   * @source
   */
  constructor({
    buttonId,
    nextScreenName,
    titleId,
    subtitleId,
    icon,
    isActive,
    iconsClasses,
    firstIconClasses,
    cssClasses,
  }: CategoryRenderObject) {
    const texts: LisioComponent[] = [
      new CustomText("p", titleId, false, ["tall"]),
    ];
    if (subtitleId != undefined) {
      texts.push(new CustomText("p", subtitleId, false, ["small"]));
    }
    const buttonChildren: LisioComponent[] = [];
    if (icon != undefined) {
      const iconsClass: string[] = [];
      if (iconsClasses == undefined) {
        iconsClasses = [];
      }
      if (firstIconClasses == undefined) {
        firstIconClasses = [];
      }
      buttonChildren.push(
        new ElementsContainer(
          [
            new CustomIcon(
              icon.fileName,
              icon.iconName,
              iconsClass.concat(iconsClasses).concat(firstIconClasses),
            ),
          ],
          undefined,
          ["home-page-icon"]
        )
      );
    }
    const iconsClass: string[] = ["arrow"];
    buttonChildren.push(
      new TextsContainer(texts, ["button-title-subtitle"]),
      new CustomIcon(
        "misc-icons",
        "Arrow",
        iconsClasses == undefined
          ? iconsClass
          : iconsClass.concat(iconsClasses),
      ),
    );
    const classes: string[] = [
      "width-100",
      "padding-inline-0",
      "btn-pill",
      "secondary",
    ];
    if (isActive) {
      classes.push("active");
    }
    super(
      buttonId,
      buttonChildren,
      (e) => ScreenManager.current.changeScreen(nextScreenName, e.detail),
      cssClasses == undefined ? classes : classes.concat(cssClasses),
      undefined,
    );
  }
}

export { CategoryComponent };