import { Dropdown } from "../ui/dropdown";
import { cn } from "@/lib/utils";
import { Link, useMatchRoute } from "@tanstack/react-router";
import { useState } from "react";
import ThreeDots from "@/icons/three-dots.svg?react";
import Edit from "@/icons/edit.svg?react";
import Share from "@/icons/share.svg?react";
import Trash from "@/icons/trash.svg?react";

export const ChatCell = ({ chat }: { chat: { id: string; title: string } }) => {
	const [isDropdownOpen, setIsDropdownOpen] = useState(false);

	const matchRoute = useMatchRoute();
	const match = matchRoute({ to: "/interaction-panel/$id", fuzzy: true });

	const activeChatId = match ? match.id : undefined;

	const DROPDOWN_OPTIONS = [
		{
			name: "Share",
			icon: <Share />,
			onClick: () => console.log("1"),
		},
		{
			name: "Rename",
			icon: <Edit />,
			onClick: () => console.log("2"),
		},
		{
			name: "Delete",
			icon: <Trash />,
			onClick: () => console.log("3"),
			className: "text-feedback-negative-900",
		},
	];

	return (
		<div
			data-active={activeChatId === chat.id}
			className="data-[active=true]:bg-fill-150  block rounded-md h-10  hover:bg-fill-100 cursor-pointer transition-colors group flex items-center"
		>
			<Link
				to="/interaction-panel/$id"
				params={{ id: chat.id }}
				viewTransition={{ types: ["warp"] }}
				key={chat.id}
				className="flex-1  h-full items-center flex pl-3"
			>
				<div className="text-sm font-medium text-text-light-900 truncate">
					{chat.title}
				</div>
			</Link>

			<Dropdown
				options={DROPDOWN_OPTIONS}
				isOpen={isDropdownOpen}
				onToggle={() => setIsDropdownOpen(!isDropdownOpen)}
				classNameTrigger="cursor-pointer flex items-center pr-3  justify-end w-5 h-full"
			>
				<ThreeDots
					className={cn(
						"duration-300",
						isDropdownOpen
							? "opacity-100"
							: "opacity-0 group-hover:opacity-100",
					)}
				/>
			</Dropdown>
		</div>
	);
};
