import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _get from "lodash/get";
import React from "react";
import { connect } from "../../../redux";
import { set } from "dot-prop-immutable";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import { Input } from "@webiny/ui/Input";
import { InputContainer } from "../components/StyledComponents";
import { Typography } from "@webiny/ui/Typography";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Form } from "@webiny/form";
import { getActiveElementWithChildren } from "../../../selectors";

var validateWidth = function validateWidth(value) {
  if (!value) {
    return null;
  }

  if (isNaN(parseInt(value))) {
    throw Error("Enter a valid number!");
  }

  if (value.endsWith("%") || value.endsWith("px")) {
    return true;
  }

  throw Error("Specify % or px!");
};

var Settings = /*#__PURE__*/function (_React$Component) {
  _inherits(Settings, _React$Component);

  var _super = _createSuper(Settings);

  function Settings() {
    var _this;

    _classCallCheck(this, Settings);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "updateSettings", /*#__PURE__*/function () {
      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, form) {
        var valid, _this$props, element, updateElement, attrKey, newElement;

        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return form.validate();

              case 2:
                valid = _context.sent;

                if (valid) {
                  _context.next = 5;
                  break;
                }

                return _context.abrupt("return");

              case 5:
                _this$props = _this.props, element = _this$props.element, updateElement = _this$props.updateElement;
                attrKey = "data.settings.columnWidth";
                newElement = set(element, attrKey, data);
                updateElement({
                  element: newElement
                });

              case 9:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function (_x, _x2) {
        return _ref.apply(this, arguments);
      };
    }());

    return _this;
  }

  _createClass(Settings, [{
    key: "render",
    value: function render() {
      var element = this.props.element;

      var data = _get(element.data, "settings.columnWidth", {
        value: "100%"
      });

      return /*#__PURE__*/React.createElement(Form, {
        data: data,
        onChange: this.updateSettings
      }, function (_ref2) {
        var Bind = _ref2.Bind;
        return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
          label: "Width"
        }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
          span: 5
        }, /*#__PURE__*/React.createElement(Typography, {
          use: "overline"
        }, "Width")), /*#__PURE__*/React.createElement(Cell, {
          span: 7
        }, /*#__PURE__*/React.createElement(InputContainer, {
          width: "auto",
          margin: 0
        }, /*#__PURE__*/React.createElement(Bind, {
          name: "value",
          validators: validateWidth
        }, /*#__PURE__*/React.createElement(Input, null)))))));
      });
    }
  }]);

  return Settings;
}(React.Component);

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    updateElement: function updateElement(payload) {
      dispatch({
        type: 'appBuilder/updateAndFlattenElement',
        payload: payload
      });
    }
  };
};

export default connect(function (state) {
  return {
    element: getActiveElementWithChildren(state)
  };
}, mapDispatchToProps)(Settings);
//# sourceMappingURL=Settings.js.map