import LiveblocksProvider from "@liveblocks/yjs";
import { Doc } from "yjs";
import {EditorContent, useEditor} from '@tiptap/react'
import {StarterKit} from '@tiptap/starter-kit'
import {Placeholder} from '@tiptap/extension-placeholder'
import {Collaboration} from '@tiptap/extension-collaboration'
import {CollaborationCursor} from "@tiptap/extension-collaboration-cursor";
import {Underline} from '@tiptap/extension-underline'
import { useSelf } from "@/app/liveblocks.config";
import { AiOutlineBold, AiOutlineItalic, AiOutlineUnderline } from "react-icons/ai";
import { LuHeading } from "react-icons/lu";

type EditorProps = {
    doc:Doc;
    provider: LiveblocksProvider<any, any, any, any>;
    cardId: string;
};

const DescEditor = ({doc, provider, cardId}:EditorProps) => {
    const userInfo = useSelf(me => me.info);
    if(!userInfo){
        return;
    }
    const editor = useEditor({
        extensions: [
            StarterKit.configure({
                history: false,
            }),
            Placeholder.configure({
                emptyEditorClass: 'is-editor-empty',
                placeholder: 'Task description...',
            }),
            Collaboration.configure({
                document: doc,
                field: cardId,
            }),
            CollaborationCursor.configure({
                provider,
                user: userInfo,
            }),
            Underline.configure(),
        ],
    });



  return (
    <div>
        <div className="flex gap-1 mb-1">
            <button onClick={() => editor?.chain().focus().toggleBold().run()} className={editor?.isActive('bold') ? 'editor-btn active' : 'editor-btn'}><AiOutlineBold/></button>
            <button onClick={() => editor?.chain().focus().toggleItalic().run()} className={editor?.isActive('italic') ? 'editor-btn active' : 'editor-btn'}><AiOutlineItalic/></button>
            <button onClick={() => editor?.chain().focus().toggleUnderline().run()} className={editor?.isActive('underline') ? 'editor-btn active' : 'editor-btn'}><AiOutlineUnderline/></button>
            <button onClick={() => editor?.chain().focus().toggleHeading({level:2}).run()} className={editor?.isActive('heading') ? 'editor-btn active' : 'editor-btn'}><LuHeading/></button>
        </div>
        <EditorContent editor={editor} className="border"/>
    </div>
  )
}

export default DescEditor