import React, { useMemo, useCallback } from 'react'
import {
  Slate,
  Editable,
  withReact,
} from 'slate-react'
import {
  createEditor,
  Descendant,
} from 'slate'
import { withHistory } from 'slate-history'

const initialValue: Descendant[] = [
  {
    type: 'paragraph',
    children: [
      {
        text: 'With Slater',
      },
    ],
  },
  {
    type: 'paragraph',
    children: [{ text: '' }],
  },
]

const CheckListsExample = () => {
  const renderElement = useCallback(props => <Element {...props} />, [])
  const editor = useMemo(
    () => withHistory(withReact(createEditor())),
    []
  )
  window.editor = editor
  let offset = 0
  const onClick = ()=>{
    setInterval(() => {
      window.editor.apply({
        type: 'insert_text',
        path: [1, 0],
        enableSelectionOp: false,
        offset,
        text: '3',
      })
      offset++
    }, 20);
  }
  return (
   <>
   <button onClick={onClick}>click me trigger</button>
    <Slate editor={editor} initialValue={initialValue}>
      <Editable
        onDOMSelectionChangeThrottleTime={0}
        scrollSelectionIntoView={()=>{
          console.log('scrollSelectionIntoView')
        }}
        renderElement={renderElement}
        placeholder="Get to work…"
        spellCheck
        autoFocus
      />
    </Slate>
   </>
  )
}
const Element = props => {
  const { attributes, children, element } = props

  switch (element.type) {
    default:
      return <p {...attributes}>{children}</p>
  }
}

export default CheckListsExample