/**
 * @mergeTarget
 * @module Src/Components/ListContainer
 */

import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { listContainerStyles } from "./list-container.css";
import { ListContainerItem } from "./list-item/list-item";
import { TranslationController } from "../../../../controllers/translation/translation-controller";

/**
 * Class representing a list container component extending LisioComponent.\
 * It aims to represent a list container component.\
 * A list container component is basically a container to display a list.\
 */
class ListContainer extends LisioComponent {
  /**
   * @async
   * Public method implementing abstract method render of LisioComponent
   * @returns Returns a promise containing the representation of a list container in HTML string
   * @source
   */
  public async render(): Promise<string> {
    return `
        <ul class="lisio-custom-list ${this.renderClasses()}" ${this.renderAttributes()}
        >
            <children></children>
        </ul>
        `;
  }

  /**
   * Constructor of class {@link ListContainer | ListContainer}
   * @param {LisioComponent[]} items - Items of the list
   * @param {string | undefined} id - Id of component
   * @param {string[] | undefined} cssClasses - CSS class of component
   * @param {string[] | undefined} cssClassesItems - CSS class of items
   * @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 hasPopu
   * @property {string | undefined} aria.describedby - Aria describedby
   * @source
   */
  constructor(
    items: LisioComponent[],
    id?: string,
    cssClasses?: string[],
    cssClassesItems?: string[],
    aria?: {
      label?: {
        noTranslate?: boolean;
        id: string;
      };
      hidden?: boolean;
      controls?: string;
      checked?: boolean;
      hasPopup?: string;
      describedby?: string;
    },
  ) {
    const attributes: Map<string, string> = new Map<string, string>();
    if (aria) {
      if (aria.label) {
        attributes.set(
          "aria-label",
          aria.label.noTranslate
            ? aria.label.id
            : TranslationController.current.getTranslation(aria.label.id),
        );
      }
      if (aria.hidden != undefined) {
        attributes.set("aria-hidden", String(aria.hidden));
      }
      if (aria.controls) {
        attributes.set("aria-controls", aria.controls);
      }
      if (aria.checked != undefined) {
        attributes.set("aria-checked", String(aria.checked));
      }
      if (aria.hasPopup) {
        attributes.set("aria-haspopup", aria.hasPopup);
      }
    }
    super(ListContainer.name, id, cssClasses, attributes);

    this._children.push(
      ...items.map((item) => {
        return new ListContainerItem(item, cssClassesItems);
      }),
    );
  }
}

new LisioComponentStyles(ListContainer.name, listContainerStyles);

export { ListContainer };