import React from 'react'
import { EMPTY_OBJ } from 'exotic'
import { oneRouter } from 'uxui-modules/router'
import { observer } from 'xmobx/mobx-react'
import {
  string,
  boolean,
  func,
  obj,
  shape,
  arrayOf,
} from 'uxui-modules/view-container/types'
import RadioOption from './RadioOption'
import SelectOption from './SelectOption'
import SwatchOption from './SquareOption'
import { ProductOptionsProps } from './typings'
import styles, { OptionListWrap, StyledLabelHeader } from './styled'

const Wrap = props => {
  return <React.Fragment>{props.children}</React.Fragment>
}

// @todo reuse
const EMPTY_OPTION_ITEM = Object.freeze({
  name: '',
  image: '',
  isSelected: true,
  isDisabled: false,
})

const isProductDetailsPage = () => true

/**
 * @type {Organism}
 */
// @styledComponent()
@styles()
@observer
export default class ProductOptions extends React.Component<
  ProductOptionsProps
  > {
  static defaultProps = {
    list: [EMPTY_OPTION_ITEM],
    isDropdown: false,
    type: '',
    onChange(...params) {
      console.log(params)
      return {}
    },
  }

  handleClick = (event, item = EMPTY_OBJ, state) => {
    console.debug('[ProductOptions] onClick option / onChange select')

    // @todo @fixme @cleanup split this out into the selectdropdown or rethink the type
    // this is because `value` is an `image url` for color...
    const value = item.type === 'color' ? item.label : item.value
    const { type, onChange } = this.props
    onChange(type, value)
  }

  get View() {
    const { type, isDropdown } = this.props
    if (isDropdown) {
      return SelectOption
    } else if (isProductDetailsPage()) {
      switch (type) {
        case 'color':
          return RadioOption
        case 'style':
          return SwatchOption
        case 'size1':
          return SwatchOption
        default:
          return SwatchOption
      }
    } else {
      switch (type) {
        case 'style':
          return SelectOption
        case 'color':
          return RadioOption
        case 'size1':
          return SelectOption
        default:
          return SelectOption
      }
    }
  }

  get attributes() {
    const { handleClick } = this

    // selected not used...
    const { list, type, selectedValue } = this.props
    return {
      list,
      type,
      selectedValue,

      // should be on change eh
      onClick: handleClick,
    }
  }

  render() {
    const { props, View, attributes } = this
    const { type } = props
    const label = type === 'size1' ? 'size' : type === 'style' ? 'fit' : type
    const qa = `qa-select-` + label

    return (
      <Wrap>
        {isProductDetailsPage() && (
          <StyledLabelHeader>{label}</StyledLabelHeader>
        )}
        <OptionListWrap data-qa={qa} type={type}>
          <View {...attributes} />
        </OptionListWrap>
      </Wrap>
    )
  }
}