// components/TiptapToolbar.tsx
import { IconAlignCenter, IconAlignLeft, IconAlignRight, IconArrowBack, IconArrowForward, IconBold, IconClearFormatting, IconClipboard, IconCode, IconCodeDots, IconH1, IconH2, IconH3, IconItalic, IconLink, IconList, IconListCheck, IconListNumbers, IconMinus, IconPilcrow, IconPolaroid, IconQuote, IconSeparatorHorizontal, IconSparkles, IconStrikethrough, IconTable, IconUnlink } from '@tabler/icons-react';
import { Editor, useEditorState } from '@tiptap/react';
import { tiptapToolBarStateSelector } from './TiptapToolbarState';
import { useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import ToolbarButton from './ToolbarButton';
import { addHorizontalRule, addImage, addTable, setLink } from './tiptapActions';

interface ToolbarProps {
    editor: Editor | null;
}

const TiptapToolbar = ({ editor }: ToolbarProps) => {
    if (!editor) {
        return null;
    }

    const editorState = useEditorState({
        editor,
        selector: tiptapToolBarStateSelector,
    })

    const editorNavbar = useRef<HTMLElement | null>(null)

    useEffect(() => {
        if (document) {
            editorNavbar.current = document.getElementById("editor-navbar")
        }
    }, [])

    return (
        <div className="border-b border-gray-300 p-2 flex flex-wrap gap-1 bg-base-200/90 backdrop-blur-xs sticky top-0 z-10">
            {/* Text Formatting */}
            <div className="flex items-center gap-1 mr-2 border-r border-gray-400 pr-2">
                <ToolbarButton isActive={editorState.isBold} disabled={!editorState.canBold} title='Bold' icon={<IconBold size={18} />} onClick={() => editor.chain().focus().toggleBold().run()} />
                <ToolbarButton isActive={editorState.isItalic} disabled={!editorState.canItalic} title='Italic' icon={<IconItalic size={18} />} onClick={() => editor.chain().focus().toggleItalic().run()} />
                <ToolbarButton isActive={editorState.isStrike} disabled={!editorState.canStrike} title='Strikethrough' icon={<IconStrikethrough size={18} />} onClick={() => editor.chain().focus().toggleStrike().run()} />
                <ToolbarButton
                    isActive={editorState.isCode}
                    disabled={!editorState.canCode}
                    title='Code'
                    icon={<IconCode size={18} />}
                    onClick={() => editor.chain().focus().toggleCode().run()}
                />

                <ToolbarButton
                    title='Clear marks'
                    icon={<IconClearFormatting size={18} />}
                    onClick={() => editor.chain().focus().unsetAllMarks().run()}
                />
            </div>

            {/* Headings */}
            <div className="flex items-center gap-1 mr-2 border-r border-gray-400 pr-2">
                <ToolbarButton
                    isActive={editorState.isHeading1}
                    title='Heading 1'
                    icon={<IconH1 size={18} />}
                    onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
                />

                <ToolbarButton
                    isActive={editorState.isHeading2}
                    title='Heading 2'
                    icon={<IconH2 size={18} />}
                    onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
                />

                <ToolbarButton
                    isActive={editorState.isHeading3}
                    title='Heading 3'
                    icon={<IconH3 size={18} />}
                    onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
                />

                <ToolbarButton
                    isActive={editorState.isParagraph}
                    title='Paragraph'
                    icon={<IconPilcrow size={18} />}
                    onClick={() => editor.chain().focus().setParagraph().run()}
                />
            </div>

            {/* Lists */}
            <div className="flex items-center gap-1 mr-2 border-r border-gray-400 pr-2">
                <ToolbarButton
                    isActive={editorState.isBulletList}
                    title='Bullet List'
                    icon={<IconList size={18} />}
                    onClick={() => editor.chain().focus().toggleBulletList().run()}
                />

                <ToolbarButton
                    isActive={editorState.isOrderedList}
                    title='Ordered List'
                    icon={<IconListNumbers size={18} />}
                    onClick={() => editor.chain().focus().toggleOrderedList().run()}
                />
            </div>

            {/* Alignment */}
            <div className="flex items-center gap-1 mr-2 border-r border-gray-400 pr-2">
                <ToolbarButton
                    isActive={editorState.isAlignLeft}
                    title='Align Left'
                    icon={<IconAlignLeft size={18} />}
                    onClick={() => editor.chain().focus().setTextAlign('left').run()}
                />

                <ToolbarButton
                    isActive={editorState.isAlignCenter}
                    title='Align Center'
                    icon={<IconAlignCenter size={18} />}
                    onClick={() => editor.chain().focus().setTextAlign('center').run()}
                />

                <ToolbarButton
                    isActive={editorState.isAlignRight}
                    title='Align Right'
                    icon={<IconAlignRight size={18} />}
                    onClick={() => editor.chain().focus().setTextAlign('right').run()}
                />
            </div>

            {/* Media & Links */}
            <div className="flex items-center gap-1 mr-2 border-r border-gray-400 pr-2">
                <ToolbarButton
                    title='Insert Image'
                    icon={<IconPolaroid size={18} />}
                    onClick={() => addImage(editor)}
                />

                <ToolbarButton
                    isActive={editorState.isLink}
                    title='Insert Link'
                    icon={<IconLink size={18} />}
                    onClick={() => setLink(editor)}
                />

                <ToolbarButton
                    isActive={!editorState.isLink}
                    title='Remove Link'
                    icon={<IconUnlink size={18} />}
                    disabled={!editorState.isLink}
                    onClick={() => editor.chain().focus().unsetLink().run()}
                />
            </div>

            {/* Advanced Features */}
            <div className="flex items-center gap-1 mr-2 border-r border-gray-400 pr-2">
                <ToolbarButton
                    title='Insert Table'
                    icon={<IconTable size={18} />}
                    onClick={() => addTable(editor)}
                />

                <ToolbarButton
                    isActive={editorState.isCodeBlock}
                    title='Code Block'
                    icon={<IconCodeDots size={18} />}
                    onClick={() => editor.chain().focus().toggleCodeBlock().run()}
                />

                <ToolbarButton
                    isActive={editorState.isBlockquote}
                    title='Quote'
                    icon={<IconQuote size={18} />}
                    onClick={() => editor.chain().focus().toggleBlockquote().run()}
                />

                <ToolbarButton
                    title='Horizontal Rule'
                    icon={<IconMinus size={18} />}
                    onClick={() => addHorizontalRule(editor)}
                />

                <ToolbarButton
                    title='Line Break'
                    icon={<IconSeparatorHorizontal size={18} />}
                    onClick={() => editor.chain().focus().setHardBreak().run()}
                />
            </div>

            {/* History */}
            {editorNavbar.current ?
                createPortal(<div className="flex items-center gap-1 ml-auto">
                    <ToolbarButton
                        disabled={!editorState.canUndo}
                        title='Undo'
                        icon={<IconArrowBack size={18} />}
                        onClick={() => editor.chain().focus().undo().run()}
                    />

                    <ToolbarButton
                        disabled={!editorState.canRedo}
                        title='Redo'
                        icon={<IconArrowForward size={18} />}
                        onClick={() => editor.chain().focus().redo().run()}
                    />
                </div>, editorNavbar.current) :
                <div className="flex items-center gap-1 ml-auto">
                    <ToolbarButton
                        disabled={!editorState.canUndo}
                        title='Undo'
                        icon={<IconArrowBack size={18} />}
                        onClick={() => editor.chain().focus().undo().run()}
                    />

                    <ToolbarButton
                        disabled={!editorState.canRedo}
                        title='Redo'
                        icon={<IconArrowForward size={18} />}
                        onClick={() => editor.chain().focus().redo().run()}
                    />
                </div>
            }
        </div>
    );
};

export default TiptapToolbar;