import {
	ChevronDownIcon,
	MoveLeftIcon,
	MoveRightIcon,
	RefreshIcon,
	TrashIcon,
} from "@lume/icons";
import { useColumn } from "@lume/storage";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { useQueryClient } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { useColumnContext } from "./provider";

export function ColumnHeader({
	queryKey,
}: {
	queryKey?: string[];
}) {
	const { t } = useTranslation();
	const { move, remove } = useColumn();

	const column = useColumnContext();
	const queryClient = useQueryClient();

	const refresh = async () => {
		if (queryKey) await queryClient.refetchQueries({ queryKey });
	};

	return (
		<DropdownMenu.Root>
			<div className="flex items-center justify-center gap-2 px-3 w-full border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
				<DropdownMenu.Trigger asChild>
					<div className="inline-flex items-center gap-1.5">
						<div className="text-[13px] font-medium">{column.title}</div>
						<ChevronDownIcon className="size-5" />
					</div>
				</DropdownMenu.Trigger>
				<DropdownMenu.Portal>
					<DropdownMenu.Content
						sideOffset={5}
						className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none"
					>
						<DropdownMenu.Item asChild>
							<button
								type="button"
								onClick={refresh}
								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
							>
								<RefreshIcon className="size-4" />
								{t("global.refresh")}
							</button>
						</DropdownMenu.Item>
						<DropdownMenu.Item asChild>
							<button
								type="button"
								onClick={() => move(column.id, "left")}
								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
							>
								<MoveLeftIcon className="size-4" />
								{t("global.moveLeft")}
							</button>
						</DropdownMenu.Item>
						<DropdownMenu.Item asChild>
							<button
								type="button"
								onClick={() => move(column.id, "right")}
								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
							>
								<MoveRightIcon className="size-4" />
								{t("global.moveRight")}
							</button>
						</DropdownMenu.Item>
						<DropdownMenu.Separator className="h-px my-1 bg-black/10 dark:bg-white/10" />
						<DropdownMenu.Item asChild>
							<button
								type="button"
								onClick={() => remove(column.id)}
								className="inline-flex items-center gap-3 px-3 text-sm font-medium text-red-500 rounded-lg h-9 hover:bg-red-500 hover:text-red-50 focus:outline-none"
							>
								<TrashIcon className="size-4" />
								{t("global.delete")}
							</button>
						</DropdownMenu.Item>
					</DropdownMenu.Content>
				</DropdownMenu.Portal>
			</div>
		</DropdownMenu.Root>
	);
}