import React from 'react'
import AnimateHeight from 'react-animate-height'
import { OptionListWrapper } from './styled'
import { OptionListProps } from './typings'

/**
 * @todo renderList prop here & render the list mapping...
 */
class OptionList extends React.PureComponent<OptionListProps> {
  render() {
    const { className, list, isVisible, children } = this.props
    const dynamicHeight = isVisible ? 'auto' : 0
    return (
      <OptionListWrapper
        className={className}
        length={list.length}
        isVisible={isVisible}
        tabIndex="-1"
        role="listbox"
        data-type="list"
      >
        <AnimateHeight duration={240} height={dynamicHeight}>
          {children}
        </AnimateHeight>
      </OptionListWrapper>
    )
  }
}

export { OptionList }
export default OptionList