/**
 * @mergeTarget
 * @module Src/Components/CustomInput/CustomSwitch
 */

import {
  LisioBooleanParameterNames,
  LisioProfileNames,
} from "@lisio/lisio-profils";
import { InputManager } from "../../../../managers/input-manager";
// import { CustomText } from "../../custom-text/custom-text";
import { CheckboxInput } from "./input/checkbox-input";
import { customSwitchStyles } from "./custom-switch.css";
import { MergedCategoriesNames } from "../../../screens/screen-types";
import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { ElementsContainer } from "../../containers/elements-container/elements-container";
import { CheckboxButton } from "../../checkbox-button/checkbox-button";

/**
 * Class representing a switch component extending LisioComponent.\
 * It aims to represent a switch component.\
 * A switch component is basically a component to display a checkbox input as a switch.\
 */
class CustomSwitch extends LisioComponent {
  /**
   * Private attribute to store input
   * @source
   */
  private _input: CheckboxInput;

  public get input(): CheckboxInput {
    return this._input;
  }

  /**
   * Public method to toggle switch
   * @returns Returns nothing
   * @source
   */
  public toggleSwitch(): void {
    const value: boolean = !(this._input.htmlElement as HTMLInputElement)
      .checked;
    (this._input.htmlElement as HTMLInputElement).checked = value;
    this._input.htmlElement?.dispatchEvent(new Event("change"));
  }

  /**
   * @async
   * Public method implementing abstract method render of LisioComponent
   * @returns Returns a promise containing the representation of a switch in HTML string
   * @source
   */
  public async render(): Promise<string> {
    return `
      <div class="lisio-custom-switch ${this.renderClasses()}">
        <children></children>
        <div class="lisio-switch-round">
        </div>
      </div>
    `;
  }

  /**
   * Constructor of class {@link CustomSwitch | CustomSwitch}
   * @param {LisioStringParameterNames | "users-choice"} parameterName - Name of functionality
   * @param {boolean} checked - Indicates if input is checked
   * @param {CustomText} stateText - State text
   * @param {string} screenName - Screen name including this input
   * @param {CheckboxButton} checkboxButton - Checkbox button
   * @param {MergedCategoriesNames | undefined} categoryName - Category name containing parameter or profile related to this input
   * @param {string | undefined} parentScreenName - Parent screen name in screen tree
   * @param {ElementsContainer | undefined} infobox - Infobox linked to this component
   * @param {string[] | undefined} cssClasses - CSS classes of component
   * @source
   */
  constructor(
    parameterName: LisioBooleanParameterNames | LisioProfileNames,
    checked: boolean,
    // stateText: CustomText,
    screenName: string,
    checboxButton: CheckboxButton,
    categoryName?: MergedCategoriesNames,
    parentScreenName?: string,
    infobox?: ElementsContainer,
    cssClasses?: string[],
  ) {
    super(CustomSwitch.name, undefined, cssClasses);
    infobox?.showHideElement(checked);
    const handler = async (event: any) => {
      if (parameterName.toUpperCase() in LisioBooleanParameterNames) {
        await InputManager.current.disableProfileLinkToParameter(
          parameterName as LisioBooleanParameterNames,
        );
      }
      // stateText?.changeText(
      //   event.target.checked ? "switch-active" : "switch-inactive",
      // );
      // if (event.target.checked) {
      //   stateText.htmlElement?.classList.add("bold");
      // } else {
      //   stateText.htmlElement?.classList.remove("bold");
      // }
      if (parameterName === LisioBooleanParameterNames.IS_ACTIVE) {
        window.dispatchEvent(
          new CustomEvent("changeAdaptationTitle", {
            detail: event.target.checked,
          }),
        );
      }

      const inputGlassX2 = document.querySelector(
        'input[name="glass-x2"]',
      ) as HTMLInputElement;
      const inputGlassX4 = document.querySelector(
        'input[name="glass-x4"]',
      ) as HTMLInputElement;
      if (
        parameterName === "glass_x2" &&
        inputGlassX2.checked &&
        inputGlassX4.checked
      ) {
        inputGlassX4.checked = false;
        inputGlassX4?.dispatchEvent(new Event("change"));
      }
      if (
        parameterName === "glass_x4" &&
        inputGlassX4.checked &&
        inputGlassX2.checked
      ) {
        inputGlassX2.checked = false;
        inputGlassX2?.dispatchEvent(new Event("change"));
      }
    };

    this._input = new CheckboxInput(
      checked,
      // stateText,
      parameterName,
      handler,
      `${parameterName}-input`,
      screenName,
      checboxButton,
      categoryName,
      parentScreenName,
      infobox,
      ["hidden"],
      {
        hidden: true,
      },
    );
    this._children.push(this._input);
    if (checked) {
      InputManager.current.addOrRemoveEnabledInput(parameterName, true);
    }
  }
}

new LisioComponentStyles(CustomSwitch.name, customSwitchStyles);

export { CustomSwitch };