import React, { useState, useEffect, forwardRef } from 'react';
import WangEditor from './OneStopWangEditor';

function Index({ onChange, value, otherProps, dataColumn, disabled, json, uuid }) {
  const [ready, setReady] = useState(false);
  const domKey = uuid || 'wang-editor-dom-content';
  useEffect(() => {
    let dom = document.getElementById(`wangEditor-${domKey}`);
    if(dom && dom.parentNode){
      dom.parentNode.removeChild(dom);
    }
    setReady(true);
  }, []);

  if(!ready){
    return null;
  }
  if(disabled){
    return <div dangerouslySetInnerHTML={{__html: `<div class="wangEditorHtml">${value}</div>`}}>

    </div>
  }

  return (
    <WangEditor
      key={'cmsContent'}
      zIndex={otherProps?.zIndex || undefined}
      menus={otherProps?.menus || undefined}
      placeholder={json.placeholder || ''}
      height={otherProps?.height || 450}
      value={value || ''}
      domKey={domKey}
      onChangeValue={onChange}
    />
  );
}

export default forwardRef((props, _ref) => {
  let otherProps = {};
  // console.log(props);
  if(!props.uuid){
    return <div></div>;
  }
  if (props.json?.otherProps) {
    otherProps = props.json?.otherProps;
    try {
      otherProps = new Function(otherProps)();
      // console.log(this.otherProps);
    } catch (e) {

    }
  }
  return <Index {...props} otherProps={otherProps}/>;
});
