import { Children, cloneElement, ReactElement, useContext } from 'react'
import { CommonComponentProps } from '../../utils/types'
import { PopoutContext } from './Popout'

export interface PopoutSelectProps extends CommonComponentProps {
  children: ReactElement
}

export function PopoutSelect(props: PopoutSelectProps) {
  const { children } = props

  const popoutContext = useContext(PopoutContext)

  const element = Children.only(children)
  return cloneElement(element, {
    ...element.props,
    onClick: (...args: any[]) => {
      popoutContext.setVisible(true)
      element.props.onClick?.(...args)
    },
  })
}

export default PopoutSelect