import type { FC } from 'react'
import React, { MutableRefObject } from 'react'
import SelectSaleType from '../SelectSaleType'
import SelectTimePicker from '../SelectTimePicker'
import SelectMarketingDepartment from '../SelectMarketingDepartment'

interface PropsType {
  children?: React.ReactNode
}

const GroupItem = [
  SelectMarketingDepartment.name,
  SelectSaleType.name,
  SelectTimePicker.name,
]

const SelectGroup: FC<PropsType> = (props: PropsType) => {
  const { children } = props

  function handleChange(children, childEle) {
    return function(value: any) {
      childEle.props.onChange(value)
      children.forEach((child) => {
        child.ref?.current.closePopup()
      })
    }
  }
  function handleCloseOverlay(children) {
    return function() {
      children.forEach((child) => {
        child.ref?.current.closePopup()
      })
    }
  }

  const renderChildren = () => {
    return React.Children.map(children, (child) => {
      const childEle = child as React.FunctionComponentElement<any>
      return React.cloneElement(childEle, { onChange: handleChange(children, childEle), onCloseOverlay: handleCloseOverlay(children) })
    })
  }
  return <>{renderChildren()}</>
}
export default SelectGroup
