"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DefaultDesigner = void 0;
var _react = _interopRequireDefault(require("react"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _get = _interopRequireDefault(require("lodash/get"));
var _CanvasProvider = require("redhotmagma-graphics-editor/CanvasInterface/CanvasProvider");
var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
var _RotateRight = _interopRequireDefault(require("@material-ui/icons/RotateRight"));
var _UnfoldMore = _interopRequireDefault(require("@material-ui/icons/UnfoldMore"));
var _Designer = _interopRequireDefault(require("./Designer"));
var _AddVisualElement = _interopRequireDefault(require("./Containers/AddVisualElement"));
var _withWidth = _interopRequireWildcard(require("@material-ui/core/withWidth"));
var _configuration = require("../../configuration");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _reactRedux = require("react-redux");
var _Selectors = require("../../Reducers/DesignArea/Selectors");
var _StandardToolboxPortal = _interopRequireDefault(require("./MultilayerComponents/StandardToolboxPortal"));
var _InlineToolboxPortal = _interopRequireDefault(require("./MultilayerComponents/InlineToolboxPortal"));
var _excluded = ["visualizationOverlayMode"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var StandardToolboxWithCanvasState = (0, _withWidth["default"])({
  initialWidth: window.innerWidth > 730 ? 'sm' : 'xs'
})(function (_ref) {
  var width = _ref.width;
  return (0, _withWidth.isWidthUp)('sm', width) &&
  /*#__PURE__*/
  // desktop only, for mobile it's rendered in the sidebar, see Screen.js
  _react["default"].createElement("div", {
    className: "noShrink",
    style: {
      paddingTop: 8,
      pointerEvents: 'none',
      position: 'relative'
    }
  }, /*#__PURE__*/_react["default"].createElement(_AddVisualElement["default"], null));
});
var renderStandardToolbox = function renderStandardToolbox() {
  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    visualizationOverlayMode = _ref2.visualizationOverlayMode;
  return function (_ref3) {
    var upload = _ref3.upload,
      StandardToolbox = _ref3.components.StandardToolbox;
    var ContainerComponent = visualizationOverlayMode ? _StandardToolboxPortal["default"] : _react["default"].Fragment;
    return /*#__PURE__*/_react["default"].createElement(ContainerComponent, null, /*#__PURE__*/_react["default"].createElement(StandardToolbox, {
      upload: upload
    }, function (_ref4) {
      var canvas = _ref4.canvas;
      return /*#__PURE__*/_react["default"].createElement(_CanvasProvider.CanvasStateProvider, {
        canvas: canvas
      }, /*#__PURE__*/_react["default"].createElement(StandardToolboxWithCanvasState, {
        canvas: canvas
      }));
    }));
  };
};
var toolboxButtonStyle = {
  width: 40,
  height: 40,
  padding: 0,
  border: '1px solid rgba(0,0,0,0.23)',
  boxSizing: 'border-box',
  borderRadius: 3,
  background: 'white',
  outline: 0,
  cursor: 'pointer',
  display: 'flex',
  justifyContent: 'center',
  color: '#282828'
};
var transformTopRight = {
  transform: 'translate(0%, -100%)'
};
var transformBottomRight = {
  transform: 'translate(0%, 0%)'
};
var transformBottomLeft = {
  transform: 'translate(-100%, 0%)'
};
var renderInlineToolButton = function renderInlineToolButton(_ref5) {
  var positionName = _ref5.positionName,
    onScalingChange = _ref5.onScalingChange,
    onRotationChange = _ref5.onRotationChange,
    onDeleteClick = _ref5.onDeleteClick,
    selectedObject = _ref5.selectedObject,
    InlineToolboxButton = _ref5.components.InlineToolboxButton;
  if (!selectedObject) {
    return null;
  }
  switch (positionName) {
    case 'topRight':
      return !selectedObject.locked && /*#__PURE__*/_react["default"].createElement(InlineToolboxButton, {
        style: _objectSpread(_objectSpread({}, toolboxButtonStyle), transformTopRight),
        onTouchStart: onRotationChange,
        onMouseDown: onRotationChange
      }, /*#__PURE__*/_react["default"].createElement(_RotateRight["default"], {
        style: {
          alignSelf: 'center'
        }
      }));
    case 'bottomRight':
      return !selectedObject.locked && /*#__PURE__*/_react["default"].createElement(InlineToolboxButton, {
        style: _objectSpread(_objectSpread({}, toolboxButtonStyle), transformBottomRight),
        onTouchStart: onScalingChange,
        onMouseDown: onScalingChange
      }, /*#__PURE__*/_react["default"].createElement(_UnfoldMore["default"], {
        style: {
          transform: 'rotate(-45deg)',
          alignSelf: 'center'
        }
      }));
    case 'bottomLeft':
      return /*#__PURE__*/_react["default"].createElement(InlineToolboxButton, {
        style: _objectSpread(_objectSpread({}, toolboxButtonStyle), transformBottomLeft),
        onClick: onDeleteClick
      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
        style: {
          alignSelf: 'center'
        }
      }));
    case 'topLeft':
      // not used
      return null;
  }
};
var AngleLabel = function AngleLabel(_ref6) {
  var angleLabel = _ref6.angleLabel;
  var isLocked = (0, _reactRedux.useSelector)(function (state) {
    return (0, _get["default"])((0, _Selectors.getSelectedDesignProductionMethod)(state), 'designElementsLocked');
  });
  return !isLocked && /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, angleLabel);
};
var renderAngleLabel = function renderAngleLabel(angleLabel) {
  return /*#__PURE__*/_react["default"].createElement(AngleLabel, {
    angleLabel: angleLabel
  });
};
var ChildrenOnlyFragment = function ChildrenOnlyFragment(_ref7) {
  var children = _ref7.children;
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
};
ChildrenOnlyFragment.propTypes = {
  children: _propTypes["default"].node
};
var renderInlineToolbox = function renderInlineToolbox(_ref8) {
  var visualizationOverlayMode = _ref8.visualizationOverlayMode;
  return function (_ref9) {
    var InlineToolbox = _ref9.components.InlineToolbox;
    return /*#__PURE__*/_react["default"].createElement(InlineToolbox, {
      renderToolboxButton: renderInlineToolButton,
      renderAngleLabel: renderAngleLabel,
      ContainerComponent: visualizationOverlayMode ? _InlineToolboxPortal["default"] : ChildrenOnlyFragment
    });
  };
};
var DefaultDesigner = exports.DefaultDesigner = function DefaultDesigner(_ref0) {
  var visualizationOverlayMode = _ref0.visualizationOverlayMode,
    props = _objectWithoutProperties(_ref0, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_Designer["default"], _extends({
    renderStandardToolbox: renderStandardToolbox({
      visualizationOverlayMode: visualizationOverlayMode
    }),
    renderSelectionToolbox: function renderSelectionToolbox() {
      return null;
    } /*disable the default*/,
    renderInlineToolbox: renderInlineToolbox({
      visualizationOverlayMode: visualizationOverlayMode
    }),
    renderRulers: (0, _configuration.getConf)('displayEditorRulers', true) ? null : _noop["default"],
    fillContainer: true
  }, props));
};