import useLocalState from "@/state/state";
import type { Ship } from "@/types/urbit";
import Sigil from "./Sigil";
import ShipModal from "./modals/ShipModal";
import { isValidPatp } from "urbit-ob";
import type { UserProfile } from "@/types/nostrill";
import Icon from "@/components/Icon";

export default function ({
  p,
  size,
  color,
  noClickOnName,
  profile,
  picOnly = false,
}: {
  p: Ship;
  size: number;
  color?: string;
  noClickOnName?: boolean;
  profile?: UserProfile;
  picOnly?: boolean;
}) {
  const { setModal } = useLocalState((s) => ({ setModal: s.setModal }));
  // TODO revisit this when %whom updates
  const avatarInner = profile ? (
    <img src={profile.picture} />
  ) : isValidPatp(p) ? (
    <Sigil patp={p} size={size} bg={color} />
  ) : (
    <Icon name="comet" />
  );
  const avatar = (
    <div className="avatar cp" onClick={openModal}>
      {avatarInner}
    </div>
  );
  if (picOnly) return avatar;

  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}>
      {profile ? (
        <p>{profile.name}</p>
      ) : (
        <p className={"p-only" + tooLong(p)}>{p.length > 28 ? "Anon" : p}</p>
      )}
    </div>
  );
  return <div className="ship-avatar">{name}</div>;
}