import { useEffect } from "preact/hooks";

declare global {
  var loadingTimeout: ReturnType<typeof setTimeout> | undefined;
}

export function Link(
  props: {
    href?: string;
    class?: string;
    style?: preact.JSX.CSSProperties;
    children: preact.ComponentChildren;
    "data-thumb"?: string;
  },
) {
  const { href, children, class: _class, style } = props;
  const thumbhash = props["data-thumb"];
  function handleClick() {
    if (globalThis.loadingTimeout) {
      return;
    }
    globalThis.loadingTimeout = setTimeout(() => {
      document.querySelector("main")?.classList.add("loading");
    }, 100);
  }

  useEffect(() => {
    if (globalThis.loadingTimeout) {
      clearTimeout(globalThis.loadingTimeout);
      delete globalThis.loadingTimeout;
      setTimeout(() => {
        globalThis.dispatchEvent(new CustomEvent("loading-finished"));
        document.querySelector("main")?.classList.remove("loading");
      }, 100);
    } else {
      globalThis.dispatchEvent(new CustomEvent("loading-finished"));
      document.querySelector("main")?.classList.remove("loading");
    }
  });

  return (
    <a
      href={href}
      style={style}
      onClick={handleClick}
      data-thumb={thumbhash}
      class={_class}
    >
      {children}
    </a>
  );
}