import React from 'react'
import PropTypes from 'prop-types'

const ScrollContext = React.createContext()

export const ScrollProvider = ({ children, itemWidth, itemHeight, onItemLayout }) => {
  const value = React.useMemo(
    () => ({ itemWidth, itemHeight, onItemLayout }),
    [itemWidth, itemHeight, onItemLayout]
  )
  return <ScrollContext.Provider value={value}>{children}</ScrollContext.Provider>
}

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

ScrollProvider.propTypes = {
  /**
   * Content to be rendered within the scroll context provider.
   */
  children: PropTypes.node.isRequired,
  /**
   * Width of each scroll item in pixels.
   */
  itemWidth: PropTypes.number.isRequired,
  /**
   * Height of each scroll item in pixels.
   */
  itemHeight: PropTypes.number.isRequired,
  /**
   * Callback invoked when a scroll item layout is measured.
   */
  onItemLayout: PropTypes.func.isRequired
}