/**
 * @mergeTarget
 * @module Src/Components/FieldsetContainer
 */

import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { CustomText } from "../../custom-text/custom-text";
import { fieldsetContainerStyles } from "./fieldset-container.css";

/**
 * Class representing a fieldset container component extending LisioComponent.
 * It aims to group related form controls with a translated legend.
 */
class FieldsetContainer extends LisioComponent {
  /**
   * @async
   * Public method implementing abstract method render of LisioComponent
   * @returns Returns a promise containing the representation of a fieldset container in HTML string
   * @source
   */
  public async render(): Promise<string> {
    return `
      <fieldset ${
        this._id ? `id='${this._id}'` : ""
      } class="lisio-fieldset-container ${this.renderClasses()}" ${this.renderAttributes()}
      >
        <children></children>
      </fieldset>
    `;
  }

  /**
   * Constructor of class {@link FieldsetContainer | FieldsetContainer}
   * @param {LisioComponent[]} children - Children of component
   * @param {string} legendId - Id of the translated legend text
   * @param {string | undefined} id - Id of component
   * @param {string[] | undefined} cssClasses - CSS classes of component
   * @param {string[] | undefined} legendClasses - CSS classes of legend
   * @source
   */
  constructor(
    children: LisioComponent[],
    legendId: string,
    id?: string,
    cssClasses?: string[],
    legendClasses: string[] = ["medium"],
  ) {
    super(FieldsetContainer.name, id, cssClasses);
    this._children = [
      new CustomText("legend", legendId, false, legendClasses),
      ...children,
    ];
  }
}

new LisioComponentStyles(FieldsetContainer.name, fieldsetContainerStyles);

export { FieldsetContainer };