import { listen } from "../../shared/helpers";

/** PettyImage — image element with fallback display on load failure. */
export class PettyImage extends HTMLElement {
  connectedCallback(): void {
    this.dataset.state = "loading";
    const img = this.querySelector("img");
    if (!img) { this.#showFallback(); return; }
    img.addEventListener("load", this.#onLoad);
    img.addEventListener("error", this.#onError);
    if (img.complete && img.naturalWidth > 0) this.#onLoad();
    else if (img.complete) this.#onError();
  }

  disconnectedCallback(): void {
    const img = this.querySelector("img");
    img?.removeEventListener("load", this.#onLoad);
    img?.removeEventListener("error", this.#onError);
  }

  #onLoad = (): void => {
    this.dataset.state = "loaded";
    const img = this.querySelector("img");
    const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null;
    if (img) img.style.display = "";
    if (fallback) fallback.style.display = "none";
  };

  #onError = (): void => {
    this.dataset.state = "error";
    this.#showFallback();
  };

  #showFallback(): void {
    const img = this.querySelector("img");
    const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null;
    if (img) img.style.display = "none";
    if (fallback) fallback.style.display = "";
  }
}