import { Editor } from '@tiptap/react';
import { BiCodeBlock, BiText } from 'react-icons/bi';
import { RiEmphasis } from 'react-icons/ri';
import {
	MdChecklist,
	MdCode,
	MdExtension,
	MdFormatBold,
	MdFormatItalic,
	MdFormatListBulleted,
	MdFormatListNumbered,
	MdFormatQuote,
	MdFormatUnderlined,
	MdImage,
	MdLink,
	MdStrikethroughS,
	MdWarning,
	MdOutlineWarning,
	MdSmartButton,
	MdOutlineAssignment
} from 'react-icons/md';
import { BsFiletypeHtml } from 'react-icons/bs';
import {
	AiOutlineInsertRowLeft,
	AiOutlineInsertRowRight,
	AiOutlineInsertRowAbove,
	AiOutlineInsertRowBelow,
	AiOutlineTable,
	AiOutlineDeleteRow,
	AiOutlineDeleteColumn,
	AiOutlineMergeCells
} from 'react-icons/ai';

export interface IUseButtonProps {
	editor: Editor;
	identifier: string;
	toggleMediaLibrary: () => void;
}

export interface IUseButtonReturn {
	dropdown?: IUseButtonReturn[];
	icon: JSX.Element;
	active: boolean;
	disabled?: boolean;
	onClick: () => void;
}

const useButton = ({ identifier, editor, toggleMediaLibrary }: IUseButtonProps): IUseButtonReturn => {
	const active = editor.isActive(decapitalizeFirstLetter(identifier));

	switch (identifier) {
		case 'Link':
			return {
				active,
				icon: <MdLink />,
				disabled:
					!editor.can().chain().focus().toggleLink({ href: '' }).run() ||
					editor.isActive('htmlsource') ||
					editor.isActive('button'),
				onClick: () => editor.chain().focus().toggleLink({ href: '' }).run()
			};
		case 'Bold':
			return {
				active,
				icon: <MdFormatBold />,
				disabled: !editor.can().chain().focus().toggleBold().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleBold().run()
			};
		case 'Strong':
			return {
				active,
				icon: <BiText />,
				disabled: !editor.can().chain().focus().toggleStrong().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleStrong().run()
			};
		case 'Italic':
			return {
				active,
				icon: <MdFormatItalic />,
				disabled: !editor.can().chain().focus().toggleItalic().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleItalic().run()
			};
		case 'Emphasis':
			return {
				active,
				icon: <RiEmphasis />,
				disabled: !editor.can().chain().focus().toggleEmphasis().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleEmphasis().run()
			};
		case 'Underline':
			return {
				active,
				icon: <MdFormatUnderlined />,
				disabled: !editor.can().chain().focus().toggleUnderline().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleUnderline().run()
			};
		case 'Strike':
			return {
				active,
				icon: <MdStrikethroughS />,
				disabled: !editor.can().chain().focus().toggleStrike().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleStrike().run()
			};
		case 'Code':
			return {
				active,
				icon: <MdCode />,
				disabled: !editor.can().chain().focus().toggleCode().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleCode().run()
			};
		case 'CodeBlock':
			return {
				active,
				icon: <BiCodeBlock />,
				disabled: !editor.can().chain().focus().toggleCodeBlock().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleCodeBlock().run()
			};
		case 'BlockQuote':
			return {
				active,
				icon: <MdFormatQuote />,
				disabled: !editor.can().chain().focus().toggleBlockquote().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleBlockquote().run()
			};
		case 'Table':
			return {
				active,
				icon: <AiOutlineTable />,
				disabled: editor.isActive('htmlsource'),
				onClick: () =>
					editor
						.chain()
						.focus()
						.insertTable({
							rows: 3,
							cols: 3,
							withHeaderRow: true
						})
						.run()
			};
		case 'Column before':
			return {
				active,
				icon: <AiOutlineInsertRowLeft />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().addColumnBefore().run()
			};
		case 'Column after':
			return {
				active,
				icon: <AiOutlineInsertRowRight />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().addColumnAfter().run()
			};
		case 'Row before':
			return {
				active,
				icon: <AiOutlineInsertRowAbove />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().addRowBefore().run()
			};
		case 'Row after':
			return {
				active,
				icon: <AiOutlineInsertRowBelow />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().addRowAfter().run()
			};
		case 'Delete row':
			return {
				active,
				icon: <AiOutlineDeleteRow />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().deleteRow().run()
			};
		case 'Delete column':
			return {
				active,
				icon: <AiOutlineDeleteColumn />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().deleteColumn().run()
			};
		case 'Merge cells':
			return {
				active,
				icon: <AiOutlineMergeCells />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().mergeOrSplit().run()
			};
		case 'BulletList':
			return {
				active,
				icon: <MdFormatListBulleted />,
				disabled: !editor.can().chain().focus().toggleBulletList().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleBulletList().run()
			};
		case 'OrderedList':
			return {
				active,
				icon: <MdFormatListNumbered />,
				disabled: !editor.can().chain().focus().toggleOrderedList().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleOrderedList().run()
			};
		case 'TaskList':
			return {
				active,
				icon: <MdChecklist />,
				disabled: !editor.can().chain().focus().toggleTaskList().run() || editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleTaskList().run()
			};
		case 'Image':
			return {
				active,
				icon: <MdImage />,
				disabled: editor.isActive('htmlsource'),
				onClick: toggleMediaLibrary
			};
		case 'Alert':
			return {
				dropdown: [
					{
						active,
						icon: <MdOutlineWarning color="#F44F56" />,
						disabled: editor.isActive('htmlsource'),
						onClick: () =>
							editor.isActive(decapitalizeFirstLetter(identifier))
								? editor.chain().focus().updateAttributes('alert', { color: '#F44F56' }).run()
								: editor.chain().focus().toggleAlert('#F44F56').run()
					},
					{
						active,
						icon: <MdOutlineWarning color="#00C670" />,
						disabled: editor.isActive('htmlsource'),
						onClick: () =>
							editor.isActive(decapitalizeFirstLetter(identifier))
								? editor.chain().focus().updateAttributes('alert', { color: '#00C670' }).run()
								: editor.chain().focus().toggleAlert('#00C670').run()
					},
					{
						active,
						icon: <MdOutlineWarning color="#FEB300" />,
						disabled: editor.isActive('htmlsource'),
						onClick: () =>
							editor.isActive(decapitalizeFirstLetter(identifier))
								? editor.chain().focus().updateAttributes('alert', { color: '#FEB300' }).run()
								: editor.chain().focus().toggleAlert('#FEB300').run()
					},
					{
						active,
						icon: <MdOutlineWarning color="#00B1FF" />,
						disabled: editor.isActive('htmlsource'),
						onClick: () =>
							editor.isActive(decapitalizeFirstLetter(identifier))
								? editor.chain().focus().updateAttributes('alert', { color: '#00B1FF' }).run()
								: editor.chain().focus().toggleAlert('#00B1FF').run()
					}
				],
				active,
				icon: <MdWarning />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleAlert('green').run()
			};
		case 'Button':
			return {
				active,
				icon: <MdSmartButton />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleButton().run()
			};
		case 'StepByStep':
			return {
				active,
				icon: <MdOutlineAssignment />,
				disabled: editor.isActive('htmlsource'),
				onClick: () => editor.chain().focus().toggleStepByStep().run()
			};
		case 'htmlsource':
			return {
				active,
				icon: <BsFiletypeHtml />,
				onClick: () => {
					if (editor.isActive('htmlsource')) {
						editor.commands.setContent(
							editor
								.getHTML()
								.replace(new RegExp(/(<p>)?<\/?htmlsource>(<\/p>)?/g), '')
								.replace(new RegExp(/&lt;/g), '<')
								.replace(new RegExp(/&gt;/g), '>')
						);
					} else {
						editor.commands.setContent(
							`<htmlsource>${editor
								.getHTML()
								.replace(new RegExp(/</g), '&lt;')
								.replace(new RegExp(/>/g), '&gt;')
								.replace(new RegExp(/&gt;&lt;/g), '&gt;<div/>&lt;')
								.replace(new RegExp(/a&gt;<div\/>&lt;\/p/g), 'a&gt;&lt;/p')}</htmlsource>`
						);
					}
				}
			};
		default:
			return {
				active,
				icon: <MdExtension />,
				disabled: true,
				onClick: () => console.error('Button data not set')
			};
	}
};

const decapitalizeFirstLetter = (string: string): string => {
	return string.charAt(0).toLocaleLowerCase() + string.slice(1);
};

export default useButton;