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

import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { MessageManager } from "../../../managers/message-manager";
import { ScreenManager } from "../../../managers/screen-manager";
import { HomeScreen } from "../../screens/home/home-screen";
import { ManagementScreen } from "../../screens/management/management-screen";
import { ElementsContainer } from "../containers/elements-container/elements-container";
import { CustomButton } from "../custom-button/custom-button";
import { CustomIcon } from "../custom-icon/custom-icon";
import { customHeaderStyles } from "./custom-header.css";
import { UserController } from "../../../controllers/user-controller";
import { CustomImage } from "../custom-image/custom-image";

/**
 * 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 CustomHeader extends LisioComponent {
  /**
   * Private attribute to store the home button
   * @source
   */
  private _homeButton: CustomButton;

  /**
   * Private attribute to store the management button
   * @source
   */
  private _managementButton: CustomButton;

  /**
   * @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 `
      <header id="lisio-custom-header" class="${this.renderClasses()}">
        <children></children>
      </header>
    `;
  }

  /**
   * Public method to toggle home button of header
   * @param {boolean} isShown - Indicates if home button has to be shown
   * @returns Returns nothing
   * @source
   */
  public toggleHomeButton(isShown: boolean): void {
    if (isShown) {
      this._homeButton.htmlElement?.classList.remove("hidden");
      this._homeButton.htmlElement?.setAttribute("aria-hidden","false");
      this._homeButton.htmlElement?.setAttribute("tabindex", "0");
    } else {
      this._homeButton.htmlElement?.classList.add("hidden");
      this._homeButton.htmlElement?.setAttribute("aria-hidden", "true");
      this._homeButton.htmlElement?.setAttribute("tabindex", "-1");
    }
  }

  /**
   * Public method to toggle management button of header
   * @param {boolean} isShown - Indicates if home button has to be shown
   * @returns Returns nothing
   * @source
   */
  public toggleManagementButton(isShown: boolean): void {
    if (isShown) {
      this._managementButton.htmlElement?.classList.remove("hidden");
      this._managementButton.htmlElement?.setAttribute("aria-hidden","false");
      this._managementButton.htmlElement?.setAttribute("tabindex", "0");
    } else {
      this._managementButton.htmlElement?.classList.add("hidden");
      this._managementButton.htmlElement?.setAttribute("aria-hidden", "true");
      this._managementButton.htmlElement?.setAttribute("tabindex", "-1");
    }
  }

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

  /**
   * 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(customImageSrc?: string, cssClasses?: string[]) {
    super(CustomHeader.name, undefined, cssClasses);

    this._homeButton = new CustomButton(
      "home-button",
      [new CustomIcon("header-icons", "NewInfoIcon", ["grey home"])],
      (e) => {
        ScreenManager.current.changeScreen(HomeScreen.name, e.detail);
      },
      ["btn-header", "hidden", "btn-grey", "btn-pill"],
      {
        label: {
          id: "widget-home",
        },
        hidden: true,
      },
    );

    this._managementButton = new CustomButton(
      "management-button",
      [new CustomIcon("header-icons", "NewDeactivateLightIcon", ["red more"])],
      (e) => {
        ScreenManager.current.changeScreen(ManagementScreen.name, e.detail);
      },
      ["red", "btn-header", "btn-pill", "margin-left-30"],
      {
        label: {
          id: "widget-management",
        },
      },
    );

    UserController.current.managementButton = this._managementButton;

    const logo =
      customImageSrc == undefined
        ? new CustomIcon("header-icons", "NewMonochromeLogo", ["logo-color"])
        : /^(?:(?!\.\w+).)*$/.test(customImageSrc)
          ? new CustomIcon(customImageSrc, "Logo")
          : new CustomImage(
              customImageSrc,
              { noTranslate: true, id: "client logo" },
              ["custom-logo"],
            );

    this._children.push(
      new ElementsContainer(
        [
          this._homeButton,
          logo,
          this._managementButton,
          new CustomButton(
            "close-button",
            [new CustomIcon("header-icons", "NewCrossIcon", ["grey close"])],
            () => {
              MessageManager.current.sendCloseWidgetMessage();
            },
            ["btn-header", "btn-grey", "btn-pill"],
            {
              label: {
                id: "widget-close",
              },
            },
          ),
        ],
        undefined,
        ["lisio-custom-header-div"],
      ),
    );
  }
}

new LisioComponentStyles(CustomHeader.name, customHeaderStyles);

export { CustomHeader };