import { BubbleMenu } from '@tiptap/react/menus'
import React from 'react'
import { Editor, useEditorState } from '@tiptap/react';
import { tiptapToolBarStateSelector } from './TiptapToolbarState';
import ToolbarButton from './ToolbarButton';
import { IconBold, IconCode, IconItalic, IconStrikethrough } from '@tabler/icons-react';

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

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


    return (
        <BubbleMenu
            className='p-1 backdrop-blur-sm border border-gray-300 rounded-sm'
            options={{
                strategy: 'absolute'
            }} editor={editor}>
            {<>
                {editorState.canBold && <ToolbarButton isActive={editorState.isBold} disabled={!editorState.canBold} title='Bold' icon={<IconBold size={18} />} onClick={() => editor.chain().focus().toggleBold().run()} />}
                {editorState.canItalic && <ToolbarButton isActive={editorState.isItalic} disabled={!editorState.canItalic} title='Italic' icon={<IconItalic size={18} />} onClick={() => editor.chain().focus().toggleItalic().run()} />}
                {editorState.canStrike && <ToolbarButton isActive={editorState.isStrike} disabled={!editorState.canStrike} title='Strikethrough' icon={<IconStrikethrough size={18} />} onClick={() => editor.chain().focus().toggleStrike().run()} />}
                {editorState.canCode && <ToolbarButton
                    isActive={editorState.isCode}
                    disabled={!editorState.canCode}
                    title='Code'
                    icon={<IconCode size={18} />}
                    onClick={() => editor.chain().focus().toggleCode().run()}
                />}
            </>}

        </BubbleMenu>
    )
}

export default TiptapBubbleMenu