"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const exotic_1 = require("exotic");

const mobx_react_1 = require("xmobx/mobx-react");

const RadioOption_1 = tslib_1.__importDefault(require("./RadioOption"));

const SelectOption_1 = tslib_1.__importDefault(require("./SelectOption"));

const SquareOption_1 = tslib_1.__importDefault(require("./SquareOption"));

const styled_1 = require("./styled");

const Wrap = props => {
  const {
    isProductDetailsPage = true,
    className
  } = props;
  return isProductDetailsPage ? react_1.default.createElement(styled_1.Wrapper, {
    className: className
  }, props.children) : react_1.default.createElement(react_1.default.Fragment, null, props.children);
}; // @todo reuse


const EMPTY_OPTION_ITEM = Object.freeze({
  name: '',
  image: '',
  isSelected: true,
  isDisabled: false
});
/**
 * @type {Organism}
 */
// @styledComponent()

let ProductOptions = class ProductOptions extends react_1.default.Component {
  /**
   * @type {Organism}
   */
  // @styledComponent()
  constructor() {
    super(...arguments);

    this.handleClick = (event, item = exotic_1.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_1.default;
    } else if (isProductDetailsPage) {
      switch (type) {
        case 'color':
          return RadioOption_1.default;

        case 'style':
          return SquareOption_1.default;

        case 'size1':
          return SquareOption_1.default;

        default:
          return SquareOption_1.default;
      }
    } else {
      switch (type) {
        case 'style':
          return SelectOption_1.default;

        case 'color':
          return RadioOption_1.default;

        case 'size1':
          return SelectOption_1.default;

        default:
          return SelectOption_1.default;
      }
    }
  }

  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 react_1.default.createElement(Wrap, {
      isProductDetailsPage: isProductDetailsPage,
      className: className
    }, isProductDetailsPage && react_1.default.createElement(styled_1.StyledLabelHeader, null, label), react_1.default.createElement(styled_1.OptionListWrap, Object.assign({}, passThroughProps), react_1.default.createElement(View, Object.assign({}, attributes))));
  }

};
ProductOptions.defaultProps = {
  className: '',
  list: [EMPTY_OPTION_ITEM],
  isDropdown: false,
  type: '',

  onChange(...params) {
    console.log(params);
    return {};
  }

};
ProductOptions = tslib_1.__decorate([mobx_react_1.observer], ProductOptions);
exports.ProductOptions = ProductOptions;
exports.default = ProductOptions;