'use client'

import type { ReactNode } from 'react'
import {
  useRef,
} from 'react'
import {
  createContext,
  useContextSelector,
} from 'use-context-selector'

export type PluginPageContextValue = {
  containerRef: React.RefObject<HTMLDivElement>
}

export const PluginPageContext = createContext<PluginPageContextValue>({
  containerRef: { current: null },
})

type PluginPageContextProviderProps = {
  children: ReactNode
}

export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
  return useContextSelector(PluginPageContext, selector)
}

export const PluginPageContextProvider = ({
  children,
}: PluginPageContextProviderProps) => {
  const containerRef = useRef<HTMLDivElement>(null)

  return (
    <PluginPageContext.Provider
      value={{
        containerRef,
      }}
    >
      {children}
    </PluginPageContext.Provider>
  )
}