import React from 'react'
import { observable } from 'xmobx/mobx'
import { observer } from 'xmobx/mobx-react'
// import { isFunction, isObj } from 'exotic'
import { SwatchList } from 'presets/SwatchList'
import {
  toOptions,
  reusableOnChange,
  toName,
  convertToOption,
  defaultOnClickAndOnChangeRadioOption,
  fromItemToValue,
} from '../deps'
import { SquareOptionProps } from './typings'

@observer
class SquareOption extends React.Component<SquareOptionProps> {
  static defaultProps = {
    /**
     * value of this square
     * @see typings
     * @example skus: [{name: '6 pack'}]
     */
    name: 'googleblueshoetwo',
    isSelected: false,
    isDisabled: true,
    value: undefined,
    type: 'size',
  }

  componentWillMount() {
    this.list = toOptions(this.props.list)
  }

  handleOnChange = (event, item, state) => {
    reusableOnChange({ event, item, state, props: this.props })
    // @todo isn't updating enough...
    this.forceUpdate()
  }

  SizeFilter = list => {
    const filterData = {
      extralarge: 'xl',
      extrasmall: 'xs',
      large: 'l',
      medium: 'm',
      small: 's',
    }

    const dataReconstruction = swatchItems => {
      const trimValue = swatchItems.label.replace(/ /g, '')
      const lowerCaseValue = trimValue.toLowerCase()
      if (filterData.hasOwnProperty(lowerCaseValue)) {
        swatchItems.label = filterData[lowerCaseValue]
        swatchItems.label = filterData[lowerCaseValue]
      }
      return swatchItems
    }

    const view = list.map((item, index) => dataReconstruction(item))
    return view
  }

  get attributes() {
    // @note onClick isn't used
    const { name } = this.props
    const listItem = this.SizeFilter(this.list)
    return {
      text: name,
      ...this.props,
      onChange: this.handleOnChange,
      list: listItem,
    }
  }

  render() {
    // const type = this.props.type || 'size'
    // const isSquare = type === 'size' || type === 'size1'
    // console.log('[Square Options] attributes', this.attributes)
    const { attributes } = this

    return <SwatchList {...attributes} />
  }
}

export { SquareOption }
export default SquareOption