/**
 * @mergeTarget
 * @module Src/Screens/Comfort
 */

import {
  LisioProfileNames,
  LisioParameterNames,
  LisioUser,
  LisioCategoryNames,
  LisioCategory,
} from "@lisio/lisio-profils";
import { LisioScreen } from "../lisio-screen";
import {
  BooleanParameterRenderObject,
  StringParameterRenderObject,
  NumberParameterRenderObject,
  ComponentAndPosition,
  CategoryRenderObject,
  ProfileRenderObject,
  MergedCategoriesNames,
  VisualCategoryNames,
  ScreenNames,
} from "../screen-types";
import { ListContainer } from "../../components/containers/list-container/list-container";
import { DyslexiaScreen } from "../dyslexia/dyslexia-screen";
import { HomeScreen } from "../home/home-screen";
import { LisioComponent } from "@lisio/lisio-engine";
import { MoreScreen } from "../more/more-screen";

/**
 * Class representing a comfort screen component extending LisioScreen.\
 * It aims to represent a comfort screen component.\
 * A comfort screen component is basically a component to render all comfort categories, profiles and parameters.\
 */
class ComfortScreen extends LisioScreen {
  protected _categoryRenderObjects: Map<
    MergedCategoriesNames,
    CategoryRenderObject
  > = new Map<MergedCategoriesNames, CategoryRenderObject>([
    [
      LisioCategoryNames.DYSLEXIA_COMFORT,
      {
        buttonId: "dyslexia-comfort",
        titleId: "dyslexia-comfort-button",
        nextScreenName: DyslexiaScreen.name,
        position: 10,
        isActive: false,
        activeSubObjects: new Set(),
        firstIconClasses: ["primary"],
        iconsClasses: ["grey"],
        cssClasses: ["secondary", "space-between"],
      },
    ],
    [
      VisualCategoryNames.MORE,
      {
        buttonId: `${this.id}-more`,
        icon: {
          fileName: "footer-icons",
          iconName: "More",
        },
        titleId: "more-button",
        nextScreenName: MoreScreen.name,
        position: 10,
        isActive: false,
        activeSubObjects: new Set(),
        firstIconClasses: ["grey2"],
        iconsClasses: ["grey"],
        cssClasses: ["secondary", "footer-button"],
      },
    ],
  ]);

  /**
   * Protected attribute to store profile render objects
   * @source
   */
  protected _profileRenderObjects: Map<LisioProfileNames, ProfileRenderObject> =
    new Map<LisioProfileNames, ProfileRenderObject>([
      [
        LisioProfileNames.READING,
        {
          buttonId: "reading",
          titleId: "reading-button",
          position: 0,
          name: LisioProfileNames.READING,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-reading",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.VISION,
        {
          buttonId: "vision",
          titleId: "vision-button",
          position: 1,
          name: LisioProfileNames.VISION,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-vision",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.PRESBYOPIA,
        {
          buttonId: "presbyopia",
          titleId: "presbyopia-button",
          position: 2,
          name: LisioProfileNames.PRESBYOPIA,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-presbyopia",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.CATARACT,
        {
          buttonId: "cataract",
          titleId: "cataract-button",
          position: 3,
          name: LisioProfileNames.CATARACT,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-cataract",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.ATTENTION,
        {
          buttonId: "attention",
          titleId: "attention-button",
          position: 6,
          name: LisioProfileNames.ATTENTION,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-attention",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.MEMORY,
        {
          buttonId: "memory",
          titleId: "memory-button",
          position: 7,
          name: LisioProfileNames.MEMORY,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-memory",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.VERY_LOW_EYE_SIGHT,
        {
          buttonId: "very-low-eye-sight",
          titleId: "very-low-eye-sight-button",
          position: 5,
          name: LisioProfileNames.VERY_LOW_EYE_SIGHT,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-very-low-eye-sight",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.LEARNING,
        {
          buttonId: "learning",
          titleId: "learning-button",
          position: 8,
          name: LisioProfileNames.LEARNING,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-learning",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.LOW_EYE_SIGHT,
        {
          buttonId: "low-eye-sight",
          titleId: "low-eye-sight-button",
          position: 4,
          name: LisioProfileNames.LOW_EYE_SIGHT,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-low-eye-sight",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
      [
        LisioProfileNames.HEADACHE,
        {
          buttonId: "headache",
          titleId: "headache-button",
          position: 9,
          name: LisioProfileNames.HEADACHE,
          value: false,
          cssClasses: ["width-100", "btn-pill", "secondary", "space-between"],
          infoBoxes: [
            {
              textId: "infobox-headache",
              cssClassesText: ["info-text"],
            },
          ],
        },
      ],
    ]);

  /**
   * Protected attribute to store parameter render objects
   * @source
   */
  protected _parameterRenderObjects: Map<
    LisioParameterNames,
    | BooleanParameterRenderObject
    | StringParameterRenderObject
    | NumberParameterRenderObject
  > = new Map<
    LisioParameterNames,
    | BooleanParameterRenderObject
    | StringParameterRenderObject
    | NumberParameterRenderObject
  >();

  /**
   * @async
   * Public method implementing abstract method render of LisioComponent
   * @returns Returns a promise containing the representation of a comfort screen in HTML string
   * @source
   */
  public async render(): Promise<string> {
    return `
    <section id="${this._id}" role="tabpanel">
      <children></children>
    </section>
    `;
  }

  /**
   * Constructor of class {@link ComfortScreen | ComfortScreen}
   * @param {(VisualCategoryNames | LisioCategory)[]} categories - Categories to include in this screen
   * @param {LisioProfileNames[]} profileNames - Profiles to include in this screen
   * @param {LisioUser | undefined} user - Current user
   * @source
   */
  constructor(
    categories: (VisualCategoryNames | LisioCategory)[],
    profileNames: LisioProfileNames[],
    hiddenProfileNames: LisioProfileNames[],
    isCompensation?: boolean,
    user?: LisioUser,
  ) {
    ScreenNames[ComfortScreen.name] = "comfort-screen";
    super(
      ComfortScreen.name,
      ComfortScreen.name,
      LisioCategoryNames.COMFORT,
      HomeScreen.name,
    );

    const categoriesElements: ComponentAndPosition[] =
      this.initCategories(categories);
    const profilesElements: ComponentAndPosition[] = this.initProfiles(
      profileNames,
      hiddenProfileNames,
      user?.profiles,
    );

    const elementsTitleContainer: LisioComponent =
      this.createScreenTitle("comfort-title");

    const elements: ComponentAndPosition[] =
      categoriesElements.concat(profilesElements);
    elements.sort((a, b) => a.position - b.position);
    const elementsContainer: LisioComponent = new ListContainer(
      elements.map((group) => group.component),
      undefined,
      ["lines-h column", "full", "secondary"],
    );

    const contentAndFooterContainer: LisioComponent = new ListContainer(
      [
        elementsContainer,
        ...(isCompensation ? this.createFooter(isCompensation) : []),
      ],
      undefined,
      ["column", "screen-ul", "width-100"],
    );

    this._children?.push(elementsTitleContainer, contentAndFooterContainer);
  }
}

export { ComfortScreen };