import { Editor, useEditorState } from '@tiptap/react'
import { FloatingMenu } from '@tiptap/react/menus'
import { tiptapToolBarStateSelector } from './TiptapToolbarState';
import ToolbarButton from './ToolbarButton';
import { addHorizontalRule, addImage, addTable } from './tiptapActions';
import { IconMinus, IconPolaroid, IconSeparatorHorizontal, IconTable } from '@tabler/icons-react';

const TiptapFloatingMenu = ({
    editor
}: {
    editor: Editor
}) => {
    if (!editor) {
        return null;
    }

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

    return (
        <FloatingMenu
            className='p-1 backdrop-blur-sm border border-gray-300 rounded-sm'
            editor={editor}>
            <ToolbarButton
                title='Insert Image'
                icon={<IconPolaroid size={18} />}
                onClick={() => addImage(editor)}
            />

            <ToolbarButton
                title='Insert Table'
                icon={<IconTable size={18} />}
                onClick={() => addTable(editor)}
            />

            <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()}
            />
        </FloatingMenu>
    )
}

export default TiptapFloatingMenu