import React, { useEffect, useMemo } from 'react';
import { ReactEditor, useEditor } from '@milkdown/react';
import { LocaleProps} from '../../locale';

import { createEditor } from './editor';

interface MilkdownProps extends LocaleProps {
  model: string;// 默认值
  disabled?: boolean;// 是否禁用
  onModelChange?: (markdown: string) => void;
  onFocus?: (val: string) => void;
  onBlur?: (val: string) => void;

  config?: any
};



export default (props: MilkdownProps) => {
  const { model, disabled: readOnly } = props;

  const value = React.useRef<string>(model)
  const {
      editor,
      getInstance,
      loading: editorLoading,
  } = useEditor((root) => createEditor(root, model, readOnly, onModelChange, onFocus, onBlur), [readOnly, model]);


  function onModelChange(val: string){
    value.current = val
    props.onModelChange?.(val)
  }
  function onFocus(){
    props.onFocus?.(value.current)
  }
  function onBlur(){
    props.onBlur?.(value.current)
  }
  //   useEffect(() => {
  //     if (editorLoading) return;
  //     const editor = getInstance();
  //     if (!editor) return;

  //     // editor.action(switchTheme(isDarkMode ? nordDark : nordLight));
  // }, [editorLoading, getInstance, focused]);


    return <ReactEditor editor={editor} />
}
