import { __ } from "@wordpress/i18n";
import type { ConversationSummary, DateGroup } from "../data/types";
import { groupByDate } from "../data/groupByDate";
import ConversationItem from "./ConversationItem";
import styles from "./ConversationList.module.css";

interface Props {
	conversations: ConversationSummary[];
	selectedId: string | null;
	onSelect: (id: string) => void;
}

export default function ConversationList({
	conversations,
	selectedId,
	onSelect,
}: Props) {
	const groups: DateGroup[] = groupByDate(conversations);
	const labels: Record<string, string> = {
		Today: __("Today", "flexible-chat"),
		Yesterday: __("Yesterday", "flexible-chat"),
		"Last 7 days": __("Last 7 days", "flexible-chat"),
		"Last 30 days": __("Last 30 days", "flexible-chat"),
		Older: __("Older", "flexible-chat"),
	};

	return (
		<ul className={styles.list} role="listbox">
			{groups.map((group) => (
				<li
					key={group.label}
					className={styles.group}
					role="group"
					aria-label={labels[group.label] ?? group.label}
				>
					<div className={styles.groupLabel}>
						{labels[group.label] ?? group.label}
					</div>
					{group.conversations.map((conv) => (
						<ConversationItem
							key={conv.id}
							conversation={conv}
							isActive={conv.id === selectedId}
							onSelect={onSelect}
						/>
					))}
				</li>
			))}
		</ul>
	);
}