"use strict";

var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
      d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

var __importStar = this && this.__importStar || function (mod) {
  if (mod && mod.__esModule) return mod;
  var result = {};
  if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
  result["default"] = mod;
  return result;
};

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

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

const exotic_1 = require("exotic");

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

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

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

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

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

const Wrap = props => {
  return 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
});

const isProductDetailsPage = () => true;
/**
 * @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
    } = 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
    } = props;
    const label = type === 'size1' ? 'size' : type === 'style' ? 'fit' : type;
    const qa = `qa-select-` + label;
    return react_1.default.createElement(Wrap, null, isProductDetailsPage() && react_1.default.createElement(styled_1.StyledLabelHeader, null, label), react_1.default.createElement(styled_1.OptionListWrap, {
      "data-qa": qa,
      type: type
    }, react_1.default.createElement(View, Object.assign({}, attributes))));
  }

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

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

};
ProductOptions = __decorate([styled_1.default(), mobx_react_1.observer], ProductOptions);
exports.default = ProductOptions; //# sourceMappingURL=ProductOptions.js.map