import React from "react"
import { UIKitConfig } from "./types"
import { UserInteractionLayer } from "../user-interaction"
import { EditorContext } from "../editor-context"
import { EditorContextPropsBuilder } from "../editor-context/EditorContextPropsBuilder"
import CssBaseline from "@mui/material/CssBaseline"
import { ManagedDialogProvider } from "../managed-dialog"
export const UIKitProvider = React.memo(function ({
  config,
  children,
}: {
  config: UIKitConfig
  children: React.ReactNode
}) {
  const { editorCellBuilders } = config
  const editorContextProps = React.useMemo(() => {
    const builder = new EditorContextPropsBuilder()
    editorCellBuilders?.forEach(b => builder.addEditRenderBuilder(b))

    return builder.build(true)
  }, [editorCellBuilders])

  return (
    <EditorContext.Provider value={editorContextProps}>
      <CssBaseline />
      <ManagedDialogProvider>
        {children}
      </ManagedDialogProvider>
      <UserInteractionLayer />
    </EditorContext.Provider>
  )
})