import React from 'react'
import PropTypes from 'prop-types'
import { viewports } from '@telus-uds/system-constants'
import { ViewportContext } from './useViewport'
import { useViewportListener } from './useViewportListener'

/**
 * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
 *
 * @param {React.ReactNode} children - Child components that will have access to viewport context
 * @param {string} [defaultViewport] - Default viewport to use during server-side rendering.
 *   Must be one of the viewport keys from system-constants. If not provided, defaults to the smallest viewport.
 */
// eslint-disable-next-line no-unused-vars
export const ViewportProvider = React.forwardRef(({ children, defaultViewport }, _) => {
  // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
  // by useViewportListener in a layout effect before anything is shown to the user.
  const [viewport, setViewport] = React.useState(defaultViewport || viewports.keys[0])
  useViewportListener(setViewport)
  return <ViewportContext.Provider value={viewport}>{children}</ViewportContext.Provider>
})

ViewportProvider.displayName = 'ViewportProvider'
ViewportProvider.propTypes = {
  /**
   * Child components that will have access to viewport context.
   */
  children: PropTypes.node.isRequired,
  /**
   * Default viewport to use during server-side rendering. Must be one of the viewport keys from
   * system-constants. If not provided, defaults to the smallest viewport.
   */
  defaultViewport: PropTypes.oneOf(viewports.keys)
}