import { FunctionComponent } from 'react'
import { LexicalComposer } from '@lexical/react/LexicalComposer'
import BlocksEditorTheme from '../Lexical/Theme/Theme'
import { BlockEditorNodes } from '../Lexical/Nodes/AllNodes'
import { Klass, LexicalNode } from 'lexical'

type BlocksEditorComposerProps = {
  initialValue: string | undefined
  children: React.ReactNode
  nodes?: Array<Klass<LexicalNode>>
  readonly?: boolean
}

export const BlocksEditorComposer: FunctionComponent<BlocksEditorComposerProps> = ({
  initialValue,
  children,
  readonly,
  nodes = [],
}) => {
  return (
    <LexicalComposer
      initialConfig={{
        namespace: 'BlocksEditor',
        theme: BlocksEditorTheme,
        editable: !readonly,
        onError: (error: Error) => console.error(error),
        editorState: initialValue && initialValue.length > 0 ? initialValue : undefined,
        nodes: [...nodes, ...BlockEditorNodes],
      }}
    >
      <>{children}</>
    </LexicalComposer>
  )
}