import React, { useMemo } from 'react'

import { useStyleConfig, vui } from '../core'
import { cs, filterUndefined } from '../utils'
import { StepperVerticalProvider } from './context'
import StepperVerticalBase from './stepperVerticalBase'
import { StepperVerticalProps } from './stepperVerticalTypes'

/**
 * Implements vertical stepper **
 */
export const StepperVertical = vui<'div', StepperVerticalProps>((props, ref) => {
  const { children, className, size, ...rest } = props
  const styles = useStyleConfig('StepperVertical', props)

  const context = useMemo(() => filterUndefined({ size }), [size])

  return (
    <StepperVerticalProvider value={context}>
      <StepperVerticalBase className={cs('vui-stepperVertical', className)} ref={ref} {...styles.container} {...rest}>
        {children}
      </StepperVerticalBase>
    </StepperVerticalProvider>
  )
})

StepperVertical.displayName = 'StepperVertical'

export default StepperVertical
