react/components/providers/zeit-ui-provider.tsx

import React, { PropsWithChildren, useMemo, useState } from 'react'
import { ZEITUIContent, ZeitUiContextParams, UpdateToastsFunction } from '../utils/use-zeit-ui-context'
import ThemeProvider from '../styles/theme-provider'
import { ThemeParam } from '../styles/theme-provider/theme-provider'
import useCurrentState from '../utils/use-current-state'
import ToastContainer, { ToastWithID } from '../toast/toast-container'

export interface Props {
  theme?: ThemeParam
}

const ZEITUIProvider: React.FC<PropsWithChildren<Props>> = ({
  theme, children,
}) => {
  const [toasts, setToasts, toastsRef] = useCurrentState<Array<ToastWithID>>([])
  const [toastHovering, setToastHovering] = useState<boolean>(false)
  const updateToasts: UpdateToastsFunction<ToastWithID> = (fn: (toasts: ToastWithID[]) => ToastWithID[]) => {
    const nextToasts = fn(toastsRef.current)
    setToasts(nextToasts)
  }
  
  const updateToastHoverStatus = (fn: () => boolean) => {
    const nextHoverStatus = fn()
    setToastHovering(nextHoverStatus)
  }

  const initialValue = useMemo<ZeitUiContextParams>(() => ({
    toasts,
    toastHovering,
    updateToasts,
    updateToastHoverStatus,
  }), [toasts, toastHovering])

  return (
    <ZEITUIContent.Provider value={initialValue}>
      <ThemeProvider theme={theme}>
        {children}
        <ToastContainer />
      </ThemeProvider>
    </ZEITUIContent.Provider>
  )
}

export default ZEITUIProvider