import React, { forwardRef, useRef, useEffect, useMemo, useImperativeHandle } from 'react'

export default forwardRef((props, ref) => {
  const editorRef = useRef()
  const id = useMemo(() => `mce-${Math.random().toString(36).substring(2, 10)}`, [])

  useEffect(() => {
    window.tinymce.init({
      selector: `#${id}`,
      menubar: false,
      branding:false,
      setup: (editor) => {
        editor.on('change', () => {
          props.onChange(editor.getContent());
          console.log(editor.getContent())
        })
      },
      init_instance_callback: (editor) => {
        editorRef.current = editor;
      }
    });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id])

  useImperativeHandle(ref, () => ({
    setContent: (val) => {
      if (editorRef.current) {
        editorRef.current.setContent(val)
      } else {
        const t = setInterval(() => {
          if (editorRef.current) {
            editorRef.current.setContent(val)
            clearInterval(t)
            console.log('-clearInterval-')
          }
        }, 200)
      }
    }
  }))

  return (
    <textarea id={id} />
  )
})