import type { ScopedThreadRef } from "@t3tools/contracts";
import { type ReactNode, useState } from "react";

import { useFaviconForThreadUrl } from "~/browserFaviconStore";
import { cn } from "~/lib/utils";

import { BrowserMockup } from "./BrowserMockup";

export function FaviconImage(props: {
  sources: ReadonlyArray<string | null | undefined>;
  fallback: ReactNode;
  className?: string | undefined;
}) {
  const sources = props.sources.filter((source): source is string => Boolean(source));
  return (
    <FaviconImageAttempt
      key={sources.join("\0")}
      sources={sources}
      fallback={props.fallback}
      className={props.className}
    />
  );
}

function FaviconImageAttempt(props: {
  sources: ReadonlyArray<string>;
  fallback: ReactNode;
  className?: string | undefined;
}) {
  const [failed, setFailed] = useState<ReadonlySet<string>>(() => new Set());
  const source = props.sources.find((candidate) => !failed.has(candidate));
  if (!source) return props.fallback;
  return (
    <img
      src={source}
      alt=""
      aria-hidden="true"
      draggable={false}
      className={props.className}
      onError={() => setFailed((current) => new Set(current).add(source))}
    />
  );
}

export function PreviewFaviconIcon(props: {
  threadRef: ScopedThreadRef;
  url: string;
  className?: string | undefined;
}) {
  const source = useFaviconForThreadUrl(props.threadRef, props.url);
  const fallback = <BrowserMockup className={cn("size-7 shrink-0", props.className)} />;
  return (
    <FaviconImage
      sources={[source]}
      fallback={fallback}
      className={cn("size-7 shrink-0 rounded object-contain", props.className)}
    />
  );
}