import { PropsWithChildren } from 'react'

import { DatabaseSelectorStateContextProvider } from '@/state/database-selector'
import { RoleImpersonationStateContextProvider } from '@/state/role-impersonation-state'
import { TableEditorStateContextProvider } from '@/state/table-editor'
import { TabsStateContextProvider } from '@/state/tabs'

type ProjectContextProviderProps = {
  projectRef: string | undefined
}

export const ProjectContextProvider = ({
  projectRef,
  children,
}: PropsWithChildren<ProjectContextProviderProps>) => {
  return (
    <TableEditorStateContextProvider key={`table-editor-state-${projectRef}`}>
      <TabsStateContextProvider key={`tabs-state-${projectRef}`}>
        <DatabaseSelectorStateContextProvider key={`database-selector-state-${projectRef}`}>
          <RoleImpersonationStateContextProvider key={`role-impersonation-state-${projectRef}`}>
            {children}
          </RoleImpersonationStateContextProvider>
        </DatabaseSelectorStateContextProvider>
      </TabsStateContextProvider>
    </TableEditorStateContextProvider>
  )
}