"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _styles = require("@material-ui/core/styles");

var _numberTextField = _interopRequireDefault(require("../number-text-field"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var DisplaySize = (0, _styles.withStyles)(function (theme) {
  return {
    displaySize: {
      display: 'flex',
      paddingTop: theme.spacing.unit
    }
  };
})(function (_ref) {
  var size = _ref.size,
      label = _ref.label,
      classes = _ref.classes,
      onChange = _ref.onChange;

  var updateSize = function updateSize(key, v) {
    onChange(_objectSpread(_objectSpread({}, size), {}, (0, _defineProperty2["default"])({}, key, v)));
  };

  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, label), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.displaySize
  }, /*#__PURE__*/_react["default"].createElement(_numberTextField["default"], {
    label: "Width",
    type: "number",
    variant: "outlined",
    value: size.width,
    min: 150,
    max: 1000,
    onChange: function onChange(e, v) {
      return updateSize('width', v);
    }
  }), /*#__PURE__*/_react["default"].createElement(_numberTextField["default"], {
    label: "Height",
    type: "number",
    variant: "outlined",
    min: 150,
    max: 1000,
    value: size.height,
    onChange: function onChange(e, v) {
      return updateSize('height', v);
    }
  })));
});
DisplaySize.propTypes = {
  size: _propTypes["default"].shape({
    width: _propTypes["default"].number.isRequired,
    height: _propTypes["default"].number.isRequired
  }).isRequired,
  label: _propTypes["default"].string.isRequired,
  onChange: _propTypes["default"].func
};
var _default = DisplaySize;
exports["default"] = _default;
//# sourceMappingURL=display-size.js.map