import React from 'react'
import PropTypes from 'prop-types'
import { PortalProvider } from '@gorhom/portal'
import { viewports } from '@telus-uds/system-constants'
import { A11yInfoProvider } from '../A11yInfoProvider/A11yInfoProvider'
import { ViewportProvider } from '../ViewportProvider/ViewportProvider'
import { ThemeProvider } from '../ThemeProvider/ThemeProvider'
import { HydrationProvider } from './HydrationContext'

// eslint-disable-next-line no-unused-vars
export const BaseProvider = React.forwardRef(({ defaultTheme, children, themeOptions }, _) => (
  <HydrationProvider>
    <A11yInfoProvider>
      <ViewportProvider defaultViewport={themeOptions?.defaultViewport}>
        <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
          <PortalProvider>{children}</PortalProvider>
        </ThemeProvider>
      </ViewportProvider>
    </A11yInfoProvider>
  </HydrationProvider>
))

BaseProvider.displayName = 'BaseProvider'

BaseProvider.propTypes = {
  /**
   * The application subtree that receives UDS's hydration, accessibility, viewport, theme and
   * portal context.
   */
  children: PropTypes.node.isRequired,
  /**
   * Theme whose tokens are applied to the subtree, forwarded to `ThemeProvider`.
   */
  defaultTheme: ThemeProvider.propTypes?.defaultTheme,
  /**
   * Theming options forwarded to `ThemeProvider`, except `defaultViewport`, which is forwarded to
   * `ViewportProvider`.
   *
   * @see {@link ThemeProvider}
   */
  themeOptions: PropTypes.shape({
    forceAbsoluteFontSizing: PropTypes.bool,
    forceZIndex: PropTypes.bool,
    defaultViewport: PropTypes.oneOf(viewports.keys)
  })
}