'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _addonKnobs = require('@storybook/addon-knobs');

var _index = require('./index');

var _index2 = _interopRequireDefault(_index);

var _Form = require('./Form.md');

var _Form2 = _interopRequireDefault(_Form);

var _InputNumber = require('../InputNumber');

var _InputNumber2 = _interopRequireDefault(_InputNumber);

var _InputNumberKnobs = require('../InputNumber/InputNumber.knobs.options');

var _InputNumberKnobs2 = _interopRequireDefault(_InputNumberKnobs);

var _InputSliderKnobs = require('../InputSlider/InputSlider.knobs.options');

var _InputSliderKnobs2 = _interopRequireDefault(_InputSliderKnobs);

var _InputSlider = require('../InputSlider');

var _InputSlider2 = _interopRequireDefault(_InputSlider);

var _InputCurrency = require('../InputCurrency');

var _InputCurrency2 = _interopRequireDefault(_InputCurrency);

var _InputCurrencyKnobs = require('../InputCurrency/InputCurrency.knobs.options');

var _InputCurrencyKnobs2 = _interopRequireDefault(_InputCurrencyKnobs);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _react3.storiesOf)('forms|context', module).addDecorator((0, _addonKnobs.withKnobs)({ escapeHTML: false })).add('Form', function () {
  delete _InputNumberKnobs2.default.defaultValue;

  var inputTextOptionsWithKnobs = Object.assign.apply(Object, Object.entries(_InputNumberKnobs2.default).map(function (_ref) {
    var _ref2;

    var k = _ref[0],
        v = _ref[1];
    return _ref2 = {}, _ref2[k] = v(), _ref2;
  }));

  delete _InputSliderKnobs2.default.ticks;
  delete _InputSliderKnobs2.default.labelText;
  delete _InputSliderKnobs2.default.step;
  delete _InputSliderKnobs2.default.max;
  delete _InputSliderKnobs2.default.domain;

  var inputSliderOptionsWithKnobs = Object.assign.apply(Object, Object.entries(_InputSliderKnobs2.default).map(function (_ref3) {
    var _ref4;

    var k = _ref3[0],
        v = _ref3[1];
    return _ref4 = {}, _ref4[k] = v(), _ref4;
  }));
  inputSliderOptionsWithKnobs.domain = (0, _addonKnobs.array)('InputSlider.domain', [0, 1]).map(function (num) {
    return Number(num);
  });
  inputSliderOptionsWithKnobs.max = (0, _addonKnobs.number)('InputSlider.max', 1);
  inputSliderOptionsWithKnobs.step = (0, _addonKnobs.number)('InputSlider.step', 0.01, { min: 0, max: 1, step: 0.01 });
  inputSliderOptionsWithKnobs.labelText = (0, _addonKnobs.text)('InputSlider.labelText', 'Slider (Linked to Input 0 and Input 1)');
  var formTicks = (0, _addonKnobs.object)('InputSlider.ticks', { 0: '0%', 0.6: 'Minimum requirement', 1: '100%' });
  var ticks = [];
  Object.keys(formTicks).forEach(function (tick) {
    return ticks.push([tick, formTicks[tick]]);
  });
  inputSliderOptionsWithKnobs.ticks = ticks;
  // Make sure the domain is within the same range as the min and max of the input to make this work.
  delete _InputCurrencyKnobs2.default.labelText;
  var inputCurrencyOptionsWithKnobs = Object.assign.apply(Object, Object.entries(_InputCurrencyKnobs2.default).map(function (_ref5) {
    var _ref6;

    var k = _ref5[0],
        v = _ref5[1];
    return _ref6 = {}, _ref6[k] = v(), _ref6;
  }));
  inputCurrencyOptionsWithKnobs.labelText = (0, _addonKnobs.text)('InputCurrency.labelText', 'Currency Input (Set to 999 when Slider is greater than 60)');
  var languages = new Map();
  languages.set('Chinese', 'zh-CN');
  languages.set('English', 'en-US');
  languages.set('French', 'fr-FR');
  languages.set('Russian', 'ru-RU');
  inputCurrencyOptionsWithKnobs.language = languages.get(inputCurrencyOptionsWithKnobs.language);
  return _react2.default.createElement(
    _index.FormProvider,
    null,
    _react2.default.createElement(
      _index2.default,
      null,
      function (formContext) {
        inputTextOptionsWithKnobs.onChange = function (e, newVal, id) {
          // Keep test0 and test1 in sync.
          if (formContext.hasId('test0') && formContext.hasId('test1') && formContext.hasId('slider')) {
            if (id === 'test0') {
              var test0 = formContext.getValue('test0');
              formContext.setValue({ id: 'test1', value: 100 - test0 });
              formContext.setValue({ id: 'slider', value: test0 / 100 });
              if (test0 > 60) {
                formContext.setValue({ id: 'currency-input', value: '$999.00' });
              } else {
                formContext.setValue({ id: 'currency-input', value: '$0.00' });
              }
            }
            if (id === 'test1') {
              var test1 = formContext.getValue('test1');
              formContext.setValue({ id: 'test0', value: 100 - test1 });
              formContext.setValue({ id: 'slider', value: (100 - test1) / 100 });
              if (100 - test1 > 60) {
                formContext.setValue({ id: 'currency-input', value: '$999.00' });
              } else {
                formContext.setValue({ id: 'currency-input', value: '$0.00' });
              }
            }
          }
        };
        var ids = [['test0', _extends({}, inputTextOptionsWithKnobs, {
          key: 'Form.InputNumber.test0',
          defaultValue: 0,
          labelText: 'Input 0 (Linked to Input 1 and Slider)',
          id: 'test0',
          unit: '%'
        })], ['test1', _extends({}, inputTextOptionsWithKnobs, {
          key: 'Form.InputNumber.test1',
          defaultValue: 100,
          labelText: 'Input 1 (Linked to Input 0 and Slider)',
          id: 'test1',
          unit: '%'
        })]];
        var inputs = [];
        ids.forEach(function (numberProps) {
          inputs.push(_react2.default.createElement(_InputNumber2.default, numberProps[1]));
        });
        inputSliderOptionsWithKnobs.onUpdate = function (newVal, id) {
          if (formContext.hasId(id)) {
            formContext.setValue({ id: 'test0', value: Number(formContext.getValue(id) * 100).toFixed() });
            formContext.setValue({ id: 'test1', value: Number((1 - formContext.getValue(id)) * 100).toFixed() });
            if (formContext.hasId('currency-input')) {
              if (newVal > 0.6) {
                // Sets currency to 999 when slider is 60%.
                formContext.setValue({ id: 'currency-input', value: '$999.00' });
              } else {
                formContext.setValue({ id: 'currency-input', value: '$0.00' });
              }
            }
          }
        };
        return _react2.default.createElement(
          _react2.default.Fragment,
          null,
          _react2.default.createElement(_InputCurrency2.default, inputCurrencyOptionsWithKnobs),
          inputs,
          _react2.default.createElement(_InputSlider2.default, _extends({}, inputSliderOptionsWithKnobs, { id: 'slider' }))
        );
      }
    )
  );
}, { info: _Form2.default });