import useLocalState from "@/state/state";
import type { Ship } from "@/types/urbit";
import Sigil from "./Sigil";
import ShipModal from "./modals/ShipModal";

export default function ({
  p,
  size,
  color,
  noClickOnName,
}: {
  p: Ship;
  size: number;
  color?: string;
  noClickOnName?: boolean;
}) {
  const { setModal } = useLocalState();
  // TODO revisit this when %whom updates
  const avatar = (
    <div className="avatar-w sigil cp" role="link" onClick={openModal}>
      <Sigil patp={p} size={size} color={color} />
    </div>
  );
  const tooLong = (s: string) => (s.length > 15 ? " too-long" : "");
  function openModal(e: React.MouseEvent) {
    if (noClickOnName) return;
    e.stopPropagation();
    setModal(<ShipModal ship={p} />);
  }
  const name = (
    <div className="name cp" role="link" onMouseUp={openModal}>
      <p className={"p-only" + tooLong(p)}>{p.length > 28 ? "Anon" : p}</p>
    </div>
  );
  return (
    <div className="ship-avatar">
      {avatar}
      {name}
    </div>
  );
}

export function SigilOnly({ p, size, color }: any) {
  const { setModal } = useLocalState();
  function openModal(e: React.MouseEvent) {
    e.stopPropagation();
    setModal(<ShipModal ship={p} />);
  }
  return (
    <div
      className="avatar-w sigil cp"
      role="link"
      onClick={openModal}
      onMouseUp={openModal}
    >
      <Sigil patp={p} size={size} color={color} />
    </div>
  );
}