import { useEffect, useRef, useState } from "react";

import IconHistory from "virtual:icons/mdi/history";
import IconRestore from "virtual:icons/mdi/restore";

import { useChat } from "../composables";
import { __ } from "../utils/i18n";

import "./HistoryDropdown.scss";

export default function HistoryDropdown() {
	const {
		archivedConversations,
		clearArchivedConversations,
		restoreConversation,
		waitingForResponse,
	} = useChat();
	const [isOpen, setIsOpen] = useState(false);
	const wrapperRef = useRef<HTMLDivElement | null>(null);

	useEffect(() => {
		if (!isOpen) {
			return;
		}

		const handleClick = (event: MouseEvent) => {
			if (!wrapperRef.current?.contains(event.target as Node)) {
				setIsOpen(false);
			}
		};

		document.addEventListener("mousedown", handleClick);
		return () => document.removeEventListener("mousedown", handleClick);
	}, [isOpen]);

	if (archivedConversations.length === 0) {
		return null;
	}

	return (
		<div className="chat-history" ref={wrapperRef}>
			<button
				className="chat-history-button"
				type="button"
					title={__("Conversation history", "flexible-chat")}
					aria-label={__("Conversation history", "flexible-chat")}
				aria-expanded={isOpen}
				disabled={waitingForResponse}
				onClick={() => setIsOpen((current) => !current)}
			>
				<IconHistory height="18" width="18" />
			</button>
			{isOpen && (
				<div className="chat-history-dropdown" role="menu">
					<div className="chat-history-dropdown-header">
						<strong>{__("History", "flexible-chat")}</strong>
						<button
							className="chat-history-clear-button"
							type="button"
							onClick={() => {
								clearArchivedConversations();
								setIsOpen(false);
							}}
						>
							{__("Clear", "flexible-chat")}
						</button>
					</div>
					<div className="chat-history-dropdown-items">
						{archivedConversations.map((conversation) => (
							<button
								key={conversation.sessionId}
								className="chat-history-item"
								type="button"
								title={conversation.title}
								onClick={() => {
									restoreConversation(conversation.sessionId);
									setIsOpen(false);
								}}
							>
								<IconRestore height="16" width="16" />
								<span>{conversation.title}</span>
							</button>
						))}
					</div>
				</div>
			)}
		</div>
	);
}