import { useRoom } from "@/app/liveblocks.config";
import LiveblocksProvider from "@liveblocks/yjs";
import { useParams } from "next/navigation"
import { useEffect, useState } from "react";
import {Doc} from 'yjs'
import DescEditor from "./DescEditor";

const CardDesc = () => {
    const room = useRoom();
    const {cardId} = useParams();
    const [doc, setDoc] = useState<Doc|null>(null);
    const [provider, setProvider] = useState<LiveblocksProvider<any, any, any, any> | null>(null);


    useEffect(() => {
        const yDoc = new Doc();
        const yProvider = new LiveblocksProvider(room, yDoc);

        setDoc(yDoc);
        setProvider(yProvider);

        return() => {
            yDoc.destroy();
            yProvider.destroy();
        };

    }, [room])
    if(!doc || !provider){
        return null;
    }



  return (
    <div>
        <DescEditor doc={doc} provider={provider} cardId={cardId.toString()}/>
    </div>
  )
}

export default CardDesc