import React from 'react'
import { NO_OP, EMPTY_ARRAY } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { ToggleItem } from 'molecules/ToggleList'
import { SelectionState } from 'src/state/SelectionState'
import { toCommonState } from 'src/state/common'
import { list as radioInputList } from './fixtures'
import { StyledSelectDropDown } from './styled'
import { RadioIconDropDownProps } from './typings'
import {
  ActiveOption,
  ActiveOptionProps,
  StyledOption,
  SelectText,
} from 'molecules/SelectDropDown'

const renderActiveItem = (props: ActiveOptionProps) => (
  <ActiveOption {...props} label="Distance" />
)
const renderItem = (itemProps, state) => {
  console.debug('[RadioDropDown] renderItem: ', itemProps.isSelected)
  const { label, ...remainingProps } = itemProps

  return (
    <ToggleItem
      key={label}
      isRadio={true}
      // state={item}
      {...itemProps}
    />
  )
  // return <ToggleList breedType="radio" list={list} />)
}

@observer
class RadioIconDropDown extends React.Component<RadioIconDropDownProps> {
  static defaultProps = {
    className: '',
    list: radioInputList || EMPTY_ARRAY,
  }

  /**
   * Multi state object creation for selection state
   */
  observableState = new SelectionState()

  componentWillMount() {
    const attributes = {
      ...this.props,
      list: this.props.list,
      onChange: NO_OP,
    }
    this.observableState.decorateWithProps(attributes)
  }

  render() {
    // console.log('[StoreHoursDropDown] list', storeHoursList)
    return (
      <StyledSelectDropDown
        list={this.props.list}
        renderActiveItem={renderActiveItem}
        renderItem={renderItem}
        {...this.props}
      />
    )
  }
}

export { RadioIconDropDown }
export default RadioIconDropDown