import { createEditor } from '@kevisual/codemirror';
import { Chain } from '@kevisual/codemirror/utils';
import { CacheWorkspace } from '@kevisual/cache';
import { debounce } from 'lodash-es';
import { Button } from '@/components/a/button';
import { useEffect, useRef } from 'react';

type TextEditorProps = {
  filepath: string;
  content: string;
  chain?: Chain;
};
export const TextEditor = ({ filepath, content, chain }: TextEditorProps) => {
  const editorElRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<ReturnType<typeof createEditor>>(null);
  useEffect(() => {
    initEditor();
    return () => {
      if (editorRef.current) {
        chain?.destroy?.();
      }
    };
  }, []);
  useEffect(() => {
    if (editorRef.current) {
      chain?.setContent?.(content);
    }
  }, [content]);
  const initEditor = async () => {
    if (!editorElRef.current) return;
    const editor = createEditor(editorElRef.current, {
      type: 'html',
    });
    const cmScroller = editorElRef.current.querySelector('.cm-scroller');
    if (cmScroller) {
      cmScroller.classList.add('scrollbar');
    }
    chain?.setEditor?.(editor);
    editorRef.current = editor;
  };
  return <div className='h-full overflow-hidden' ref={editorElRef}></div>;
};