import React from 'react'
import { list as options } from './fixture'
import { DarkSelectDropDownProps } from './typings'
import { DarkSelectDropDownStyle, StyledMaterialIcon } from './styled'

/**
 * @fixme @invalid @todo this belong in elemnts
 *
 * Updating the arrow icon
 */
const renderArrowIcon = () => <StyledMaterialIcon type="arrow_drop_down" />

class DarkSelectDropDown extends React.Component<DarkSelectDropDownProps> {
  static defaultProps = {
    className: '',
    options,
  }
  render() {
    const { className } = this.props
    return (
      <DarkSelectDropDownStyle
        className={className}
        renderActiveAfterText={renderArrowIcon}
        {...this.props}
      />
    )
  }
}

export { DarkSelectDropDown }
export default DarkSelectDropDown