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

import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { listContainerItemStyles } from "./list-item.css";

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

  /**
   * Constructor of class {@link ListContainerItem | ListContainerItem}
   * @param {LisioComponent} child - Children of component
   * @param {string[] | undefined} cssClasses - CSS classes of component
   */
  constructor(child: LisioComponent, cssClasses?: string[]) {
    super(ListContainerItem.name, undefined, cssClasses);
    this._children.push(child);

    try {
      if (this.findChildByClass("footer")) {
        this.addClasses(["has-footer"]);
        if (this.findChildByClass("no-before")) {
          this.addClasses(["no-before"]);
        }
      }
    } catch (error: any) {}
  }
}

new LisioComponentStyles(ListContainerItem.name, listContainerItemStyles);

export { ListContainerItem };