import { useContext, ReactNode } from 'react'
import { CommonComponentProps } from '../../utils/types'
import { PopoutChangeArgsContext } from './Popout'

export interface PopoutOutletProps extends CommonComponentProps {
  format?: (...args: any[]) => ReactNode
}

export function PopoutOutlet(props: PopoutOutletProps) {
  const { format } = props

  const changeArgs = useContext(PopoutChangeArgsContext)

  return (
    <>
      {changeArgs[0] != null
        ? format
          ? format(...changeArgs)
          : changeArgs[0]
        : null}
    </>
  )
}

export default PopoutOutlet