import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import {
	BoldIcon,
	ItalicIcon,
	StrikethroughIcon,
	UnderlineIcon,
} from 'lucide-react';
import { EditorBubbleItem, useEditor } from '../core';
import type { SelectorItem } from './node-selector';

export const TextButtons = () => {
	const { editor } = useEditor();
	if (!editor) return null;
	const items: SelectorItem[] = [
		{
			name: 'bold',
			isActive: (editor) => editor!.isActive('bold'),
			command: (editor) => editor!.chain().focus().toggleBold().run(),
			icon: BoldIcon,
		},
		{
			name: 'italic',
			isActive: (editor) => editor!.isActive('italic'),
			command: (editor) => editor!.chain().focus().toggleItalic().run(),
			icon: ItalicIcon,
		},
		{
			name: 'underline',
			isActive: (editor) => editor!.isActive('underline'),
			command: (editor) => editor!.chain().focus().toggleUnderline().run(),
			icon: UnderlineIcon,
		},
		{
			name: 'strike',
			isActive: (editor) => editor!.isActive('strike'),
			command: (editor) => editor!.chain().focus().toggleStrike().run(),
			icon: StrikethroughIcon,
		},
		// {
		// 	name: 'code',
		// 	isActive: (editor) => editor!.isActive('code'),
		// 	command: (editor) => editor!.chain().focus().toggleCode().run(),
		// 	icon: CodeIcon,
		// },
	];
	return (
		<div className="flex">
			{items.map((item) => (
				<EditorBubbleItem
					key={item.name}
					onSelect={(editor) => {
						item.command(editor);
					}}
					data-state={item.isActive(editor) ? 'active' : 'inactive'}
					asChild
				>
					<Button
						size="sm"
						className="rounded-none hover:bg-[rgba(255,255,255,0.15)] hover:text-white data-[state=active]:text-teal-500"
						variant="ghost"
						type="button"
					>
						<item.icon className={cn('h-4 w-4')} />
					</Button>
				</EditorBubbleItem>
			))}
		</div>
	);
};