import { useEffect, useState } from 'react'
import { RichTextEditor } from './index.js'

export const Default = () => {
  const [value, setValue] = useState<string>()
  // const client = useClient()

  // useEffect(() => {
  //   if (!value) return

  //   exportToHTML(value, client).then((html) => console.log(html))
  // }, [value])

  return (
    <>
      <div style={{ height: '90svh', position: 'relative' }}>
        <RichTextEditor
          placeholder="Enter some text..."
          value={value}
          onChange={setValue}
        />
      </div>
    </>
  )
}

export const ChangingOutsideValue = () => {
  const [value, setValue] = useState<string>()

  useEffect(() => {
    setInterval(() => {
      setValue(
        `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${Math.random() * 100}","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
      )
    }, 500)
  }, [])

  return <RichTextEditor value={value} onChange={setValue} />
}
