import { Button } from '@/components/ui/button';
import { PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Popover } from '@radix-ui/react-popover';
import {
	Check,
	ChevronDown,
	Heading1,
	Heading2,
	Heading3,
	List,
	ListOrdered,
	type LucideIcon,
	TextIcon,
	TextQuote,
} from 'lucide-react';
import { EditorBubbleItem, useEditor } from '../core';

export type SelectorItem = {
	name: string;
	icon: LucideIcon;
	command: (
		editor: NonNullable<ReturnType<typeof useEditor>['editor']>,
	) => void;
	isActive: (
		editor: NonNullable<ReturnType<typeof useEditor>['editor']>,
	) => boolean;
};

const items: SelectorItem[] = [
	{
		name: 'Text',
		icon: TextIcon,
		command: (editor) => editor.chain().focus().setParagraph().run(),
		isActive: (editor) =>
			editor.isActive('paragraph') &&
			!editor.isActive('heading') &&
			!editor.isActive('bulletList') &&
			!editor.isActive('orderedList') &&
			!editor.isActive('taskList') &&
			!editor.isActive('blockquote'),
	},
	{
		name: 'Heading 1',
		icon: Heading1,
		command: (editor) =>
			editor.chain().focus().toggleHeading({ level: 1 }).run(),
		isActive: (editor) => editor.isActive('heading', { level: 1 }),
	},
	{
		name: 'Heading 2',
		icon: Heading2,
		command: (editor) =>
			editor.chain().focus().toggleHeading({ level: 2 }).run(),
		isActive: (editor) => editor.isActive('heading', { level: 2 }),
	},
	{
		name: 'Heading 3',
		icon: Heading3,
		command: (editor) =>
			editor.chain().focus().toggleHeading({ level: 3 }).run(),
		isActive: (editor) => editor.isActive('heading', { level: 3 }),
	},
	{
		name: 'Bullet List',
		icon: List,
		command: (editor) => editor.chain().focus().toggleBulletList().run(),
		isActive: (editor) => editor.isActive('bulletList'),
	},
	{
		name: 'Numbered List',
		icon: ListOrdered,
		command: (editor) => editor.chain().focus().toggleOrderedList().run(),
		isActive: (editor) => editor.isActive('orderedList'),
	},
	{
		name: 'Quote',
		icon: TextQuote,
		command: (editor) => editor.chain().focus().toggleBlockquote().run(),
		isActive: (editor) => editor.isActive('blockquote'),
	},
];

interface NodeSelectorProps {
	open: boolean;
	onOpenChange: (open: boolean) => void;
}

export const NodeSelector = ({ open, onOpenChange }: NodeSelectorProps) => {
	const { editor } = useEditor();
	if (!editor) return null;

	const activeItem = items.find((item) => item.isActive(editor)) ?? {
		name: '',
	};

	return (
		<Popover modal open={open} onOpenChange={onOpenChange}>
			<PopoverTrigger
				asChild
				className="gap-2 rounded-none border-none hover:bg-[rgba(255,255,255,0.15)] hover:text-white focus:ring-0"
			>
				<Button size="sm" variant="ghost" className="gap-2">
					<span className="text-sm whitespace-nowrap">
						{activeItem.name || 'Text'}
					</span>
					<ChevronDown className="h-4 w-4" />
				</Button>
			</PopoverTrigger>

			<PopoverContent
				sideOffset={5}
				align="start"
				className="w-48 bg-[#1d2327] p-1"
			>
				{items.map((item) => {
					const isActive = item.isActive(editor);
					return (
						<EditorBubbleItem
							key={item.name}
							onSelect={(editorInstance) => {
								if (!editorInstance) return;
								item.command(editorInstance);
								onOpenChange(false);
							}}
							className="flex cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm text-white hover:bg-[rgba(255,255,255,0.15)] hover:text-white"
						>
							<div className="flex items-center space-x-2">
								<div className="rounded-sm p-1">
									<item.icon className="h-3 w-3" />
								</div>
								<span>{item.name}</span>
							</div>

							{isActive && <Check className="h-4 w-4" />}
						</EditorBubbleItem>
					);
				})}
			</PopoverContent>
		</Popover>
	);
};