import { useState, useCallback } from 'react'
import { CodeMirror } from '@ui-schema/kit-codemirror/CodeMirror'
import { isRemoteChange } from '@ui-schema/kit-codemirror/isRemoteChange'
import type { CodeMirrorOnChange } from '@ui-schema/kit-codemirror/useCodeMirror'
import type { CodeMirrorComponentProps, CodeMirrorProps } from '@ui-schema/kit-codemirror/CodeMirror'

const DemoComponent = () => {
    const [value, setValue] = useState('')

    const onChange: CodeMirrorOnChange = useCallback((update, newValue) => {
        if(!update.docChanged || typeof newValue !== 'string' || isRemoteChange(update)) {
            return
        }
        setValue(newValue)
    }, [setValue])

    return <CodeMirror
        value={value}
        onChange={onChange}
    />
}