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

@observer
class ActiveOption extends React.Component<ActiveOptionProps> {
  static defaultProps = {
    state: EMPTY_OBJ,
    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