import * as React from 'react'
import { createContext, useContext, useState } from 'react'

type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>

const ClusterRefContext = createContext<UseClusterRefManagerResult>({
  clusterRef: {} as React.MutableRefObject<undefined>,
  setClusterRef: () => {},
})

function useClusterRefManager(): {
  clusterRef: any
  setClusterRef: React.Dispatch<React.SetStateAction<React.MutableRefObject<undefined>>>
} {
  const [clusterRef, setClusterRef] = useState<React.MutableRefObject<undefined>>(
    {} as React.MutableRefObject<undefined>,
  )

  return { clusterRef, setClusterRef }
}

export const ClusterRefProvider: React.FunctionComponent<{
  children?: React.ReactNode
}> = ({ children }) => (
  <ClusterRefContext.Provider value={useClusterRefManager()}>{children}</ClusterRefContext.Provider>
)

export const useClusterRef = (): any => {
  const { clusterRef } = useContext(ClusterRefContext)
  return clusterRef
}

export const useSetClusterRef = (): UseClusterRefManagerResult['setClusterRef'] => {
  const { setClusterRef } = useContext(ClusterRefContext)
  return setClusterRef
}