/**
 * @mergeTarget
 * @module Src/Components/CustomImage
 */

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

/**
 * Class representing an image component extending LisioComponent.\
 * It aims to represent an image component.\
 * An image component is basically a img, it content will be load dynamically.\
 */
class CustomImage extends LisioComponent {
  /**
   * Private attribute to store source of image
   * @source
   */
  private _src: string;
  /**
   * Private attribute to store alt text
   * @source
   */
  private _altText: string;

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

  /**
   * @async
   * Public method implementing abstract method render of LisioComponent
   * @returns Returns a promise containing the representation of an image in HTML string
   * @source
   */
  public async render(): Promise<string> {
    return `
        <img class="lisio-custom-image ${this.renderClasses()}" src="${
          this._src
        }" alt="${this._altText}" loading="lazy"/>
      `;
  }

  /**
   * Constructor of class {@link CustomImage | CustomImage}
   * @param {string} src - Source of image
   * @param {object | undefined} alt - Alt datas
   * @property {boolean} alt.noTranslate - Indicates if alt text need to be translated
   * @property {string} alt.id - Text id of alt text
   * @param {string[] | undefined} cssClasses - CSS classes of component
   * @source
   */
  constructor(
    src: string,
    alt?: { noTranslate?: boolean; id: string },
    cssClasses?: string[],
  ) {
    super(CustomImage.name, undefined, cssClasses);
    this._src = src;
    if (alt?.noTranslate) {
      this._altText = alt.id;
    } else {
      if (alt != undefined) {
        try {
          this._altText = TranslationController.current.getTranslation(alt?.id);
        } catch (error) {
          console.log(error);
          this._altText = "";
        }
      } else {
        this._altText = "";
      }
    }
    if (alt && !alt.noTranslate) {
      window.addEventListener(translateEvent.type, () => {
        this.changeAlt(alt.id);
      });
    }
  }
}

new LisioComponentStyles(CustomImage.name, customImageStyles);

export { CustomImage };