/**
 * @mergeTarget
 * @module Src/Components/ElementsContainer
 */

import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { elementsContainerStyles } from "./elements-container.css";
import { TranslationController } from "../../../../controllers/translation/translation-controller";

/**
 * Class representing an element container component extending LisioComponent.\
 * It aims to represent an e
 * lement container component.\
 * An element container component is basically a container to display elements in a certain way.\
 */
class ElementsContainer extends LisioComponent {
  private _parentComponent?: LisioComponent;

  public get parentComponent(): LisioComponent | undefined {
    return this._parentComponent;
  }

  public set parentComponent(value: LisioComponent) {
    this._parentComponent = value;
  }

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

  /**
   * Constructor of class {@link ElementsContainer | ElementsContainer}
   * @param {LisioComponent[]} children - Children of component
   * @param {string | undefined} id - Id of component
   * @param {string[] | undefined} cssClasses - CSS classes of component
   * @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 {string | undefined} aria.describedby - Aria describedby
   * @source
   */
  constructor(
    children: LisioComponent[],
    id?: string,
    cssClasses?: string[],
    attributes?: Map<string, string>,
    aria?: {
      label?: {
        noTranslate?: boolean;
        id: string;
      };
      hidden?: boolean;
      controls?: string;
      describedby?: string;
    },
  ) {
    if (attributes) {
      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);
        }
      }
    }

    super(ElementsContainer.name, id, cssClasses, attributes);
    this._children = children;
    this._id = id;
  }
}

new LisioComponentStyles(ElementsContainer.name, elementsContainerStyles);

export { ElementsContainer };