"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
  };
};

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

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

const mobx_react_1 = require("xmobx/mobx-react"); // import { isFunction, isObj } from 'exotic'


const SwatchList_1 = require("../../../presets/SwatchList");

const deps_1 = require("../deps");

let SquareOption = class SquareOption extends react_1.default.PureComponent {
  constructor() {
    super(...arguments);

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

      this.forceUpdate();
    };

    this.SizeFilter = item => {
      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;
      };

      item = item.map((item, index) => dataReconstruction(item));
      return item;
    };
  }

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

  get attributes() {
    // @note onClick isn't used
    const {
      name
    } = this.props;
    const listItem = this.SizeFilter(this.list);
    return Object.assign({
      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 react_1.default.createElement(SwatchList_1.SwatchList, Object.assign({}, attributes));
  }

};
SquareOption.defaultProps = {
  /**
   * value of this square
   * @see typings
   * @example skus: [{name: '6 pack'}]
   */
  name: 'googleblueshoetwo',
  isSelected: false,
  isDisabled: true,
  value: undefined,
  type: 'size'
};
SquareOption = __decorate([mobx_react_1.observer], SquareOption);
exports.SquareOption = SquareOption;
exports.default = SquareOption; //# sourceMappingURL=SquareOption.js.map