import { Image } from "@shared/image";

import { DEFAULT_AVATAR } from "@stores/constants";

import { useActiveAccount } from "@utils/hooks/useActiveAccount";
import { usePageContext } from "@utils/hooks/usePageContext";
import { shortenKey } from "@utils/shortenKey";

import { twMerge } from "tailwind-merge";

export default function ChatsListSelfItem() {
	const pageContext = usePageContext();

	const searchParams: any = pageContext.urlParsed.search;
	const pagePubkey = searchParams.pubkey;

	const { account, isLoading, isError } = useActiveAccount();

	return (
		<>
			{isError && <div>error</div>}
			{isLoading && !account ? (
				<div className="inline-flex h-8 items-center gap-2.5 rounded-md px-2.5">
					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
					<div>
						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
					</div>
				</div>
			) : (
				<a
					href={`/app/chat?pubkey=${account.pubkey}`}
					className={twMerge(
						"inline-flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:bg-zinc-900",
						pagePubkey === account.pubkey
							? "dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
							: "",
					)}
				>
					<div className="relative h-5 w-5 shrink-0 rounded">
						<Image
							src={account?.picture || DEFAULT_AVATAR}
							alt={account.pubkey}
							className="h-5 w-5 rounded bg-white object-cover"
						/>
					</div>
					<div className="inline-flex items-baseline">
						<h5 className="max-w-[9rem] truncate font-medium text-zinc-200">
							{account?.nip05 || account?.name || shortenKey(account.pubkey)}
						</h5>
						<span className="text-zinc-600">(you)</span>
					</div>
				</a>
			)}
		</>
	);
}