"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Designer = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@material-ui/core/styles");
var _Editor = _interopRequireDefault(require("redhotmagma-graphics-editor/Components/Editor/Editor"));
var _EditorContainer = _interopRequireDefault(require("redhotmagma-graphics-editor/Components/Editor/EditorContainer"));
var _AlignTargetProvider = require("redhotmagma-visualization/AlignTargetProvider");
var _createCheckerBoardBackground = require("../../../Utils/Styles/createCheckerBoardBackground");
var _excluded = ["children"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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 _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 mockUploadFunction = function mockUploadFunction(files) {
  return new Promise(function (resolve, reject) {
    var reader = new FileReader();
    reader.onload = function () {
      var dataURL = reader.result;
      resolve([{
        src: dataURL
      }]);
    };
    reader.onerror = reject;
    reader.readAsDataURL(files[0]);
  });
};
var styles = function styles(theme) {
  var _root;
  return {
    root: (_root = {
      flexShrink: 1,
      flexBasis: '100%',
      display: 'flex',
      flexDirection: 'column',
      maxWidth: '100%',
      alignItems: 'center'
    }, _defineProperty(_root, theme.breakpoints.down('xs'), {
      minHeight: '150px'
    }), _defineProperty(_root, '&:before', {
      content: "''",
      display: 'block',
      marginTop: 'auto'
    }), _defineProperty(_root, '&:after', {
      content: "''",
      display: 'block',
      marginBottom: 'auto'
    }), _defineProperty(_root, '& > :not(.resize-sensor)', {
      /**
       * The pointer events are passed through in the "main" class of DefaultLayout,
       * but the contained elements may need it (like the Designer and its controls)
       * @see DefaultLayout
       */
      pointerEvents: 'all'
    }), _root),
    checkerBoardBackground: _objectSpread({}, (0, _createCheckerBoardBackground.createCheckerBoardBackground)({
      darkColor: 'rgba(0, 0, 0, 0.1)',
      lightColor: 'rgba(0, 0, 0, 0.01)'
    }))
  };
};
var CustomEditorContainer = (0, _styles.withStyles)({
  closeButton: {
    position: 'absolute',
    top: -20,
    right: -20,
    cursor: 'pointer'
  }
}, {
  name: 'CustomEditorContainer'
})(function (_ref) {
  var children = _ref.children,
    props = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_EditorContainer["default"], props, children);
});
var getCustomEditorStyle = function getCustomEditorStyle(_ref2) {
  var hasBorder = _ref2.hasBorder;
  var style = {};
  if (!hasBorder) {
    style.borderWidth = 0;
  }
  return style;
};
var Designer = exports.Designer = function Designer(_ref3) {
  var renderStandardToolbox = _ref3.renderStandardToolbox,
    renderSelectionToolbox = _ref3.renderSelectionToolbox,
    renderInlineToolbox = _ref3.renderInlineToolbox,
    renderRulers = _ref3.renderRulers,
    canvasSize = _ref3.canvasSize,
    classes = _ref3.classes,
    show = _ref3.show,
    selectedColor = _ref3.selectedColor,
    alignTarget = _ref3.alignTarget,
    EditorContainer = _ref3.EditorContainer,
    hideDesigner = _ref3.hideDesigner,
    hasBorder = _ref3.hasBorder,
    useCheckerBoardBackground = _ref3.useCheckerBoardBackground,
    renderInCanvasContainer = _ref3.renderInCanvasContainer;
  var containerReadyHandler = (0, _react.useMemo)(function () {
    return function (_ref4) {
      var container = _ref4.container;
      alignTarget.add(container);
      // it has to be delayed in the next message, when the correct size is already available
      return function () {
        return setTimeout(function () {
          return alignTarget.remove(container);
        });
      };
    };
  }, [alignTarget]);
  var containerUpdateHandler = (0, _react.useMemo)(function () {
    return function () {
      // re-add it on update to trigger the change which updates the offset
      setTimeout(function () {
        alignTarget.add(null);
        alignTarget.remove(null);
      });
    };
  }, [alignTarget]);
  var EditorContainerWithInjectedProps = (0, _react.useMemo)(function () {
    return function (props) {
      return /*#__PURE__*/_react["default"].createElement(EditorContainer, _extends({}, props, {
        onClickClose: hideDesigner
      }));
    };
  }, [hideDesigner]);
  return show && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement(_Editor["default"], {
    style: getCustomEditorStyle({
      hasBorder: hasBorder
    }),
    containerClassName: useCheckerBoardBackground && classes.checkerBoardBackground,
    canvasSize: canvasSize,
    upload: mockUploadFunction,
    renderStandardToolbox: renderStandardToolbox,
    renderSelectionToolbox: renderSelectionToolbox,
    renderInlineToolbox: renderInlineToolbox,
    renderRulers: renderRulers,
    subtractSiblingsHeight: true,
    allowUpScaling: true,
    selectedColor: selectedColor,
    onContainerReady: containerReadyHandler,
    onContainerUpdate: containerUpdateHandler,
    EditorContainer: EditorContainerWithInjectedProps,
    renderInCanvasContainer: renderInCanvasContainer
  }));
};
Designer.defaultProps = {
  renderStandardToolbox: null,
  renderSelectionToolbox: null,
  renderInlineToolbox: null,
  show: true,
  hasBorder: true,
  renderRulers: null,
  selectedColor: '',
  hideDesigner: null,
  EditorContainer: CustomEditorContainer,
  useCheckerBoardBackground: false
};
var _default = exports["default"] = (0, _styles.withStyles)(styles, {
  name: 'Designer'
})((0, _AlignTargetProvider.withAlignTarget)(Designer));