import React from 'react'
import { EMPTY_OBJ } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import RadioOption from './RadioOption'
import SelectOption from './SelectOption'
import SwatchOption from './SquareOption'
import { ProductOptionsProps } from './typings'
import { OptionListWrap, StyledLabelHeader, Wrapper } from './styled'

const Wrap = props => {
  const { isProductDetailsPage = true, className } = props
  return isProductDetailsPage ?
      (<Wrapper className={className}>{props.children}</Wrapper>) :
      (<React.Fragment>{props.children}</React.Fragment>)
}

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

/**
 * @type {Organism}
 */
// @styledComponent()
@observer
class ProductOptions extends React.Component<
  ProductOptionsProps
  > {
  static defaultProps = {
    className: '',
    list: [EMPTY_OPTION_ITEM],
    isDropdown: false,
    type: '',
    onChange(...params: [string, string | number]) {
      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, isProductDetailsPage = true } = 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, isProductDetailsPage = true, className } = props
    const label = type === 'size1' ? 'size' : type === 'style' ? 'fit' : type
    const qa = `qa-select-` + label
    const passThroughProps = isProductDetailsPage ? {
      'data-qa': qa,
      type,
    } : {
      className,
      'data-qa': qa,
      type,
    }

    return (
      <Wrap isProductDetailsPage={isProductDetailsPage} className={className}>
        {isProductDetailsPage && (
          <StyledLabelHeader>{label}</StyledLabelHeader>
        )}
        <OptionListWrap {...passThroughProps}>
          <View {...attributes} />
        </OptionListWrap>
      </Wrap>
    )
  }
}

export default ProductOptions
export { ProductOptions }