import {
	Command,
	createSuggestionItems,
	renderItems,
} from '@/admin/features/activity-editor/core';
import { __ } from '@wordpress/i18n';
import {
	Heading1,
	Heading2,
	Heading3,
	List,
	ListOrdered,
	Text,
	TextQuote,
} from 'lucide-react';

export const suggestionItems = createSuggestionItems([
	{
		title: 'Text',
		description: 'Just start typing with plain text.',
		searchTerms: ['p', 'paragraph'],
		icon: <Text size={18} />,
		command: ({ editor, range }) => {
			editor
				.chain()
				.focus()
				.deleteRange(range)
				.toggleNode('paragraph', 'paragraph')
				.run();
		},
		group: 'content',
	},
	{
		title: 'Heading 1',
		description: 'Big section heading.',
		searchTerms: ['title', 'big', 'large'],
		icon: <Heading1 size={18} />,
		command: ({ editor, range }) => {
			editor
				.chain()
				.focus()
				.deleteRange(range)
				.setNode('heading', { level: 1 })
				.run();
		},
		group: 'content',
	},
	{
		title: 'Heading 2',
		description: 'Medium section heading.',
		searchTerms: ['subtitle', 'medium'],
		icon: <Heading2 size={18} />,
		command: ({ editor, range }) => {
			editor
				.chain()
				.focus()
				.deleteRange(range)
				.setNode('heading', { level: 2 })
				.run();
		},
		group: 'content',
	},
	{
		title: 'Heading 3',
		description: 'Small section heading.',
		searchTerms: ['subtitle', 'small'],
		icon: <Heading3 size={18} />,
		command: ({ editor, range }) => {
			editor
				.chain()
				.focus()
				.deleteRange(range)
				.setNode('heading', { level: 3 })
				.run();
		},
		group: 'content',
	},
	{
		title: 'Bullet List',
		description: 'Create a simple bullet list.',
		searchTerms: ['unordered', 'point'],
		icon: <List size={18} />,
		command: ({ editor, range }) => {
			editor.chain().focus().deleteRange(range).toggleBulletList().run();
		},
	},
	{
		title: 'Numbered List',
		description: 'Create a list with numbering.',
		searchTerms: ['ordered'],
		icon: <ListOrdered size={18} />,
		command: ({ editor, range }) => {
			editor.chain().focus().deleteRange(range).toggleOrderedList().run();
		},
		group: 'content',
	},
	{
		title: 'Quote',
		description: 'Capture a quote.',
		searchTerms: ['blockquote'],
		icon: <TextQuote size={18} />,
		command: ({ editor, range }) =>
			editor
				.chain()
				.focus()
				.deleteRange(range)
				.toggleNode('paragraph', 'paragraph')
				.toggleBlockquote()
				.run(),
		group: 'content',
	},
]);

export const GROUP_NAMES = {
	content: __('Content', 'allcoach'),
	inputElements: __('Input Elements', 'allcoach'),
	mediaElements: __('Media Elements', 'allcoach'),
};

export const slashCommand = Command.configure({
	// @ts-ignore
	suggestion: {
		items: () => suggestionItems,
		render: renderItems,
	},
});