import React 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'

/**
 * @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,
  }

  handleClick = (event: Event): void => {
    const { onClick, value, label } = this.props
    console.debug('[Select.Option] handleClick')

    /**
     * @todo should be `item` but also we want `props`... identifier...
     * @todo invalid value?
     */
    onClick(value || label)
  }

  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.handleClick}
        isSelected={props.isSelected}
        isDisabled={props.isDisabled}
        role="option"
      >
        {children}
      </StyledOption>
    )
  }
}

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