/**
 * @mergeTarget
 * @module Src/Components/CustomLink
 */

import { LisioComponent, LisioComponentStyles } from "@lisio/lisio-engine";
import { TranslationController } from "../../../controllers/translation/translation-controller";
import { customLinkStyles } from "./custom-link.css";
import { LisioTextComponent } from "../LisioTextComponent/LisioTextComponent";
import { translateEvent } from "../../../../misc/events";

/**
 * Class representing a link component extending LisioTextComponent.\
 * It aims to represent a link component.\
 * A link component is basically a link to another resource.\
 */
class CustomLink extends LisioTextComponent {
  /**
   * Private attribute to store href of link
   */
  private _href: string;

  /**
   * Private attribute to store the link's title
   */
  private _title?: string;

  private _downloadName?: string;

  /**
   * Public method to change title text
   * @param {string} textId - Id of new title text
   * @param {boolean} noTranslate - Indicates if text has to be translated. Default value set to false
   * @returns Returns nothing
   * @source
   */
  public changeTitle(textId: string, noTranslate: boolean = false): void {
    if (noTranslate) {
      if (this._htmlElement == undefined) {
        this._title = textId;
      } else {
        this._htmlElement.title = textId;
      }
    } else {
      if (this._htmlElement == undefined) {
        this._title = TranslationController.current.getTranslation(textId);
      } else {
        this._htmlElement.title =
          TranslationController.current.getTranslation(textId);
      }
    }
  }

  /**
   * @async
   * Public method implementing abstract method render of LisioComponent
   * @returns Returns a promise containing the representation of a link in HTML string
   * @source
   */
  public async render(): Promise<string> {
    return `<a href="${
      this._href
    }" target="_blank" class="lisio-custom-link ${this.renderClasses()}" ${
      this._title ? `title = "${this._title}"` : ""
    } ${
      this._downloadName != undefined ? `download="${this._downloadName}"` : ""
    }>
            ${this._textContent ? this._textContent : ""}
            <children></children>
        </a>`;
  }

  /**
   * Constructor of class {@link CustomLink | CustomLink}
   * @param {string} href - Href of link
   * @param {LisioComponent[]} children - Children of component
   * @param {string | undefined} textId - Text id of component
   * @param {boolean | undefined} noTranslate - Indicates if text ahs to be transalated
   * @param {string[] | undefined} cssClasses - CSS classes of component
   * @source
   */
  constructor(
    href: string,
    children: LisioComponent[],
    textId?: string,
    noTranslate?: boolean,
    cssClasses?: string[],
    titleId?: string,
    downloadName?: string,
  ) {
    super(
      CustomLink.name,
      textId,
      undefined,
      cssClasses,
      undefined,
      noTranslate,
    );
    this._downloadName = downloadName;
    if (titleId) {
      if (noTranslate) {
        this._title = titleId;
      } else {
        try {
          this._title = TranslationController.current.getTranslation(titleId);
        } catch (error) {
          console.log(error);
          this._title = "";
        }
      }
    }
    this._href = href;
    this._children = children;
    if (titleId && !noTranslate) {
      window.addEventListener(translateEvent.type, () => {
        this.changeTitle(titleId);
      });
    }
  }
}

new LisioComponentStyles(CustomLink.name, customLinkStyles);

export { CustomLink };