import { useParty } from "#/hooks/use-party";
import { useUser } from "#/hooks/user";
import { client } from "#/lib/eden";
import { initials } from "#/lib/utils";
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { Button } from "./ui/button";
import {
	Item,
	ItemActions,
	ItemContent,
	ItemDescription,
	ItemMedia,
	ItemTitle,
} from "./ui/item";

export function UserInfo() {
	const { user } = useUser();
	const { party, members, isConnecting, isReconnecting, resetParty } =
		useParty();
	return (
		<Item>
			<ItemMedia>
				<Avatar>
					<AvatarImage src={user?.image || undefined} />
					<AvatarFallback>{initials(user?.name || "")}</AvatarFallback>
				</Avatar>
			</ItemMedia>
			<ItemContent>
				<ItemTitle>{user?.name}</ItemTitle>
				<ItemDescription>
					{isConnecting
						? "Connecting..."
						: isReconnecting
							? "Reconnecting..."
							: party
								? `${members.length} in party`
								: "No party yet"}
				</ItemDescription>
			</ItemContent>
			<ItemActions>
				{party && (
					<Button
						onClick={async () => {
							await client.api.party.leave.post();
							resetParty();
						}}
					>
						Leave
					</Button>
				)}
			</ItemActions>
		</Item>
	);
}