import React from 'react'
import { StyledClickBoundary } from './styled'

export interface SelectBoundaryProps {
  onClickOutside: Function
  isVisible?: boolean
  isDisabled?: boolean
  className?: string
  children: any
  'data-qa'?: string
}

/**
 * @todo nowrap!!!
 * @todo convert SelectWrap to be withComponent(clickBoundary)
 */
class SelectBoundary extends React.PureComponent<SelectBoundaryProps> {
  render() {
    const {
      onClickOutside,
      isDisabled,
      isVisible,
      className,
      children,
    } = this.props
    return (
      <StyledClickBoundary
        // @note - undefined means the prop does not get added
        aria-disabled={isDisabled}
        aria-expanded={isVisible}
        className={className}
        onClickOutside={onClickOutside}
        data-qa={this.props['data-qa']}
      >
        {children}
      </StyledClickBoundary>
    )
  }
}

export { SelectBoundary }
export default SelectBoundary