/**
 * @todo finish this
 */

interface OptionOnChange {
  (props: SemanticOptionCompatProps): void
}
interface SemanticOptionCompatProps {
  isSemantic?: boolean
  onChange: OptionOnChange
}
type SemanticOptionProps = SemanticOptionCompatProps
// type SemanticOptionProps =
//   | React.ClassAttributes<
//       HTMLSelectElement & HTMLDivElement & SemanticOptionCompatProps
//     >
//   | React.ClassAttributes<HTMLSelectElement>
//   | React.ClassAttributes<HTMLDivElement>
//   | React.ClassAttributes<SemanticOptionCompatProps>
class SemanticOption extends React.PureComponent<SemanticOptionProps> {
  static defaultProps = {
    isSemantic: true,
  }
  render() {
    const { isSemantic, ...remainingProps } = this.props

    if (isSemantic === true) {
      return <option {...remainingProps} />
    } else {
      const { onChange, ...passthroughProps } = remainingProps
      const attributes = {
        onClick: onChange,
      }
      return <StyledOption role="option" {...remainingProps} />
    }
  }
}


import React from 'react'
import toClassName from 'classnames'
import { OptionProps } from './typings'

/**
 * @todo - stateful observable version
 *
 * @type {Atom}
 */
class Option extends React.PureComponent<OptionProps> {
  static defaultProps = {
    // can also do defaultClassName
    className: 'option',
  }

  static from(option, index) {
    return <Option {...option} index={index} />
  }

  get attributes() {
    const {
      //
      isSelected,
      isDisabled,
      disabled,
      //
      label,
      value,
      //
      index,
      identifier,
      //
      className,
      ...passthroughProps
    } = this.props

    const classNamed = toClassName(className)

    const attributes = {
      key: index,
      // @todo aria-labelledby if passed in...?
      // 'aria-label': label,
      // 'aria-selected': isSelected,
      role: 'option',

      className: classNamed,

      value,

      disabled: disabled || isDisabled,
      label,
    }

    return attributes
  }

  render() {
    const { label } = this.attributes
    return <option {...this.attributes}>{label}</option>
  }
}

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