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

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

import { shortenKey } from "@utils/shortenKey";

import destr from "destr";
import { Author } from "nostr-relaypool";
import { useContext, useEffect, useState } from "react";

const DEFAULT_BANNER =
	"https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg";

export default function ProfileMetadata({ id }: { id: string }) {
	const pool: any = useContext(RelayContext);
	const [profile, setProfile] = useState(null);

	useEffect(() => {
		const user = new Author(pool, READONLY_RELAYS, id);
		user.metaData((res) => setProfile(destr(res.content)), 0);
	}, [id, pool]);

	return (
		<>
			<div className="relative">
				<div className="relative h-56 w-full rounded-t-lg bg-zinc-800">
					<Image
						src={profile?.banner || DEFAULT_BANNER}
						alt="user's banner"
						className="h-58 w-full object-cover"
					/>
				</div>
				<div className="relative -top-8 z-10 px-4">
					<div className="relative h-16 w-16 rounded-lg bg-zinc-900 ring-2 ring-zinc-900">
						<Image
							src={profile?.picture || DEFAULT_AVATAR}
							alt={id}
							className="h-16 w-16 rounded-lg object-cover"
						/>
					</div>
				</div>
			</div>
			<div className="-mt-4 mb-8 px-4">
				<div>
					<div className="mb-3 flex flex-col">
						<h3 className="text-lg font-semibold leading-tight text-white">
							{profile?.display_name || profile?.name}
						</h3>
						<span className="text-base leading-tight text-zinc-500">
							{profile?.username || (id && shortenKey(id))}
						</span>
					</div>
					<div className="prose-sm prose-zinc leading-tight dark:prose-invert">
						{profile?.about}
					</div>
				</div>
			</div>
		</>
	);
}