import { ChatsListItem } from "@app/chat/components/item";
import { useActiveAccount } from "@stores/accounts";
import { useChats } from "@stores/chats";
import { useEffect } from "react";

export function ChatsList() {
	const account = useActiveAccount((state: any) => state.account);
	const chats = useChats((state: any) => state.chats);
	const fetchChats = useChats((state: any) => state.fetch);

	useEffect(() => {
		if (!account) return;
		fetchChats(account.pubkey);
	}, [fetchChats]);

	return (
		<div className="flex flex-col gap-1">
			{!chats ? (
				<>
					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
						<div className="h-3 w-full animate-pulse bg-zinc-800" />
					</div>
					<div className="inline-flex h-8 items-center gap-2 rounded-md px-2.5">
						<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
						<div className="h-3 w-full animate-pulse bg-zinc-800" />
					</div>
				</>
			) : (
				chats.map((item: { sender_pubkey: string }) => (
					<ChatsListItem key={item.sender_pubkey} pubkey={item.sender_pubkey} />
				))
			)}
		</div>
	);
}