import React from 'react'
import { NO_OP } from 'exotic'
import { SelectRenderItemProps, SelectProps } from '../typings'
import { OptionProps } from './typings'
import { StyledOption } from './styled'
import { defaultRenderBeforeText, defaultRenderText } from './renderProps'

const defaultOptionOnClick =
  process.env.NODE_ENV === 'production'
    ? NO_OP
    : () => console.info('[Select.Option] defaultOptionOnClick')

/**
 * @todo <extends keyof>
 */
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,
  }
  static from(item: OptionProps & SelectRenderItemProps, props: SelectProps) {
    return <Option key={item.label} {...item} {...props} />
  }
  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,
      // renderChildren,
      ...props
    } = this.props
    const state = this.props.state

    const children = props.children || (
      <React.Fragment>
        {renderBeforeText(props, state)}
        {renderText(props, state)}
      </React.Fragment>
    )
    const setClassName = props.isDisabled
      ? (className || '') + ' ' + 'disable-option'
      : className
    return (
      <StyledOption
        className={setClassName}
        onClick={this.handleClick}
        isSelected={props.isSelected}
        isDisabled={props.isDisabled}
        role="option"
      >
        {children}
      </StyledOption>
    )
  }
}

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