import React from 'react'
import PropTypes from 'prop-types'
import { getTokensPropType } from '../utils/props/tokens'

const CarouselContext = React.createContext()

export const CarouselProvider = ({
  activeIndex,
  children,
  goTo,
  getCopyWithPlaceholders,
  itemLabel,
  refocus = false,
  themeTokens,
  totalItems,
  width,
  maximumItemsForSlide,
  maxWidth,
  viewportWidth
}) => {
  const value = React.useMemo(
    () => ({
      activeIndex,
      goTo,
      getCopyWithPlaceholders,
      itemLabel,
      refocus,
      themeTokens,
      totalItems,
      width,
      maximumItemsForSlide,
      maxWidth,
      viewportWidth
    }),
    [
      activeIndex,
      goTo,
      getCopyWithPlaceholders,
      itemLabel,
      refocus,
      totalItems,
      themeTokens,
      width,
      maximumItemsForSlide,
      maxWidth,
      viewportWidth
    ]
  )
  return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
}

export function useCarousel() {
  const context = React.useContext(CarouselContext)
  if (context === undefined) {
    throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`)
  }
  return context
}

CarouselProvider.propTypes = {
  children: PropTypes.arrayOf(PropTypes.element).isRequired,
  activeIndex: PropTypes.number.isRequired,
  goTo: PropTypes.func.isRequired,
  getCopyWithPlaceholders: PropTypes.func.isRequired,
  itemLabel: PropTypes.string.isRequired,
  refocus: PropTypes.bool,
  themeTokens: getTokensPropType('Carousel'),
  totalItems: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
  maximumItemsForSlide: PropTypes.number,
  maxWidth: PropTypes.number,
  viewportWidth: PropTypes.number
}