import React from 'react'
import { EMPTY_OBJ } from 'exotic'
import { Option } from '../Option'
import { defaultRenderText } from '../Option/renderProps'
import {
  defaultRenderActiveAfterText,
  defaultRenderActiveBeforeText,
} from './renderProps'
import { StyledSelect } from './styled'
import { ActiveOptionProps } from './typings'

// extends Option<ActiveOptionProps>
class ActiveOption extends React.Component<ActiveOptionProps> {
  static defaultProps = {
    // @@todo @james @sri
    state: {},
    renderText: defaultRenderText,
    renderActiveAfterText: defaultRenderActiveAfterText,
    renderActiveBeforeText: defaultRenderActiveBeforeText,
  }
  render() {
    const props = this.props
    const {
      onClick,
      state,
      renderText,
      renderActiveAfterText,
      renderActiveBeforeText,
    } = props

    return (
      <StyledSelect
        onClick={onClick}
        data-type="select"
        aria-haspopup="listbox"
      >
        {renderActiveBeforeText(props, state)}
        {renderText(props, state)}
        {renderActiveAfterText(props, state)}
      </StyledSelect>
    )
  }
}

export { ActiveOption }
export default ActiveOption