import React, { MouseEvent, KeyboardEvent } from 'react'
import { NO_OP } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { SelectRenderItemProps } from '../typings'
import { OptionProps } from './typings'
import { StyledOption } from './styled'
import { defaultRenderBeforeText, defaultRenderText } from './renderProps'
import { handleClick, isEnter } from 'molecules/deps'

/**
 * @description this is for optimization
 */
const defaultOptionOnClick =
  process.env.NODE_ENV === 'production'
    ? NO_OP
    : () => console.info('[Select.Option] defaultOptionOnClick')

@observer
class Option extends React.Component<OptionProps & SelectRenderItemProps> {
  static defaultProps = {
    identifier: 0,
    label: '',
    onClick: defaultOptionOnClick,

    // @todo
    // or children...
    renderText: defaultRenderText,
    // @note can't import 2 aliases
    renderBeforeText: defaultRenderBeforeText,
  }

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

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

  render() {
    // @todo !!!
    const {
      renderBeforeText,
      renderText,
      className,
      state,
      // renderChildren,
      ...props
    } = this.props
    // const state = this.props.state

    const children = props.children || (
      <React.Fragment>
        {renderBeforeText(props, state)}
        {renderText(props, state)}
      </React.Fragment>
    )

    return (
      <StyledOption
        className={className}
        onClick={this.handleClickEvent}
        onKeyDown={this.handleKeyDownEvent}
        isSelected={props.isSelected}
        isDisabled={props.isDisabled}
        role="option"
        tabIndex={0}
      >
        {children}
      </StyledOption>
    )
  }
}

export { Option }
export { Option as SelectOption }
export default Option