import React, { MouseEvent, KeyboardEvent } from 'react'
import { observer } from 'xmobx/mobx-react'
import { EMPTY_OBJ } from 'exotic'
import { handleClick, isEnter } from 'molecules/deps'
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,
  }

  handleKeyDownEvent = (event: KeyboardEvent<any> | Event) => {
    isEnter(event) && this.handleClickEvent(event)
  }

  handleClickEvent = (event: MouseEvent<any> | Event) => {
    handleClick({ event, ...this.props })
  }

  render() {
    const props = this.props
    const {
      state,
      renderText,
      renderActiveAfterText,
      renderActiveBeforeText,
    } = props

    /**
     * @info role="listbox"
     * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
     * The listbox role is used for lists from which a user may select one or more items
     * which are static and, unlike HTML <select> elements, may contain images.
     */
    return (
      <StyledSelect
        onClick={this.handleClickEvent}
        onKeyDown={this.handleKeyDownEvent}
        data-type="select"
        aria-haspopup="listbox"
        tabIndex={'0'}
        role={'listbox'}
      >
        {renderActiveBeforeText(props, state)}
        {renderText(props, state)}
        {renderActiveAfterText(props, state)}
      </StyledSelect>
    )
  }
}

export { ActiveOption }
export default ActiveOption