import React from 'react'
import { observable } from 'xmobx/mobx'
import { observer } from 'xmobx/mobx-react'
import {
  ColorSwatchList,
  ColorSwatchItem,
} from 'presets/ColorSwatchList'
import {
  reusableOnChange,
  toName,
  convertToOption,
  defaultOnClickAndOnChangeRadioOption,
  fromItemToValue,
} from '../deps'
import { RadioOptionProps } from './typings'

/**
 * @todo ui goes here
 */
@observer
export default class RadioOption extends React.Component<RadioOptionProps> {
  static defaultProps = {
    onClick: defaultOnClickAndOnChangeRadioOption,
    onChange: defaultOnClickAndOnChangeRadioOption,
    // @todo EMPTY_LIST as long as we don't mutate
    list: [],
    type: '',
  }

  // @todo - didMount
  // @todo no need to do state here with new ColorSwatchlist from ui-component-library
  // state = new RadioGroupState()
  componentWillMount() {
    // console.event('props receive', this.props.list)
    // const removeDisabled = option => !option.isDisabled
    // const list = this.props.list.filter(removeDisabled).map(convertToOption)
    // this.state.updateFrom(list)

    // !!! TODO !!! THIS SHOULD BE OBSERVABLE FROM 1PRODUCT, OTHERWISE WE LOSE REFERENCE
    // we can observe(this.props.list) though
    const list = this.props.list.map(convertToOption)
    this.list = observable(list)
  }

  renderItem = (item, index, ...remain) => {
    const { image, value, ...props } = item
    return <ColorSwatchItem key={item.label} value={image} {...props} />
  }

  handleOnChange = (event, item, state) => {
    reusableOnChange({ event, item, state, props: this.props })

    // @todo isn't updating enough...
    this.forceUpdate()
  }

  get attributes() {
    // @note onClick isn't used
    return {
      list: this.list,
      renderItem: this.renderItem,
      // state: this.state,
      onChange: this.handleOnChange,
    }
  }

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