/**
 * @mergeTarget
 * @module Src/Components/CustomHeader
 */

import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { ElementsContainer } from "../containers/elements-container/elements-container";
import { customFooterStyles } from "./custom-footer.css";
import { CustomButton } from "../custom-button/custom-button";
import { CustomText } from "../custom-text/custom-text";
import { ScreenManager } from "../../../managers/screen-manager";
import { MoreScreen } from "../../screens/more/more-screen";

/**
 * Class representing a header component extending LisioComponent.\
 * It aims to represent a header component.\
 * A header component is basically a container for elements which have to be display at the top of the widget.\
 */
class CustomFooter extends LisioComponent {

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

  /**
   * Public method to be called after render
   * @returns Returns nothing
   * @source
   */
  public postRender(): void {
  }

  /**
   * Constructor of class {@link CustomHeader | CustomHeader}
   * @param {string | undefined} customImageSrc - Image source for client logo, if is an svg give only name of json file, if not give an url
   * @param {string[] | undefined} cssClasses - CSS classes of component
   * @source
   */
  constructor(cssClasses?: string[]) {
    super(CustomFooter.name, undefined, cssClasses);

    this._children.push(
      new ElementsContainer(
        [
          new CustomText(
            "p",
            "footer-discover-text"
          ),
          new CustomButton(
            "btn-footer-more",
            [
              new CustomText(
                "p",
                "LISIO",
                true,
              )
            ],
            (e) => ScreenManager.current.changeScreen(MoreScreen.name, e.detail),
            ["link-like-button"]
          )
        ],
        undefined,
        ["footer-div"]
      ),
    );
  }
}

new LisioComponentStyles(CustomFooter.name, customFooterStyles);

export { CustomFooter };