"use strict";

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

var _reactEasyCrop = _interopRequireDefault(require("react-easy-crop"));

var _Box = require("../Box");

var _Button = require("../Button");

var _ButtonGroup = require("../ButtonGroup");

var _Heading = require("../Heading");

var _Modal = require("../Modal");

var _Slider = require("../Slider");

var _CropImage = _interopRequireDefault(require("./CropImage"));

var _styles = _interopRequireDefault(require("./styles"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __jsx = _react["default"].createElement;

var ImageCrop = function ImageCrop(_ref) {
  var src = _ref.src,
      _ref$aspect = _ref.aspect,
      aspect = _ref$aspect === void 0 ? 4 / 3 : _ref$aspect,
      setCroppedImage = _ref.setCroppedImage,
      trigger = _ref.trigger,
      _ref$open = _ref.open,
      open = _ref$open === void 0 ? false : _ref$open,
      onClose = _ref.onClose,
      _ref$imageType = _ref.imageType,
      imageType = _ref$imageType === void 0 ? 'jpeg' : _ref$imageType;

  var _useState = (0, _react.useState)(open),
      isOpen = _useState[0],
      setIsOpen = _useState[1];

  var _useState2 = (0, _react.useState)({
    x: 0,
    y: 0
  }),
      crop = _useState2[0],
      setCrop = _useState2[1];

  var _useState3 = (0, _react.useState)(0),
      rotation = _useState3[0],
      setRotation = _useState3[1];

  var _useState4 = (0, _react.useState)(1),
      zoom = _useState4[0],
      setZoom = _useState4[1];

  var _useState5 = (0, _react.useState)(null),
      croppedAreaPixels = _useState5[0],
      setCroppedAreaPixels = _useState5[1];

  var _useImageCropStyle = (0, _styles["default"])(null),
      containerStyleProps = _useImageCropStyle.root,
      controlsStyleProps = _useImageCropStyle.controls;

  var onCropComplete = (0, _react.useCallback)(function (croppedArea, croppedAreaPixelsNew) {
    setCroppedAreaPixels(croppedAreaPixelsNew);
  }, []);
  var makeCroppedImage = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
    var croppedImage;
    return _regenerator["default"].wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return (0, _CropImage["default"])(src, croppedAreaPixels, rotation, imageType);

          case 3:
            croppedImage = _context.sent;

            if (setCroppedImage) {
              setCroppedImage(croppedImage);
            }

            _context.next = 10;
            break;

          case 7:
            _context.prev = 7;
            _context.t0 = _context["catch"](0);
            console.error(_context.t0);

          case 10:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, null, [[0, 7]]);
  })), [croppedAreaPixels, rotation]);

  var closeModal = function closeModal() {
    setIsOpen(false);

    if (onClose) {
      onClose();
    }
  };

  var closeWithSave = function closeWithSave() {
    makeCroppedImage();
    closeModal();
  };

  (0, _react.useEffect)(function () {
    setIsOpen(open);
  }, [open]);
  return __jsx(_react["default"].Fragment, null, __jsx(_Modal.Modal, {
    isOpen: isOpen,
    onClose: closeModal,
    size: "lg"
  }, __jsx(_Modal.ModalOverlay, null), __jsx(_Modal.ModalContent, null, __jsx(_Modal.ModalHeader, null, __jsx(_Heading.Heading, {
    kind: "h5"
  }, "Crop Image")), __jsx(_Modal.ModalCloseButton, {
    onClick: closeModal,
    position: "absolute",
    top: "8px",
    right: "12px"
  }), __jsx(_Modal.ModalBody, null, __jsx(_Box.Box, containerStyleProps, __jsx(_reactEasyCrop["default"], {
    image: src,
    crop: crop,
    rotation: rotation,
    zoom: zoom,
    aspect: aspect,
    onCropChange: setCrop,
    onRotationChange: setRotation,
    onCropComplete: onCropComplete,
    onZoomChange: setZoom
  })), __jsx(_Box.Box, controlsStyleProps, __jsx(_Slider.Slider, {
    value: zoom,
    min: 1,
    max: 3,
    step: 0.1,
    "aria-labelledby": "Zoom",
    onChange: function onChange(zoomChange) {
      return setZoom(zoomChange);
    }
  }, __jsx(_Slider.SliderTrack, null), __jsx(_Slider.SliderFilledTrack, null), __jsx(_Slider.SliderThumb, null)))), __jsx(_Modal.ModalFooter, null, __jsx(_ButtonGroup.ButtonGroup, null, __jsx(_Button.Button, {
    variant: "tertiary",
    onClick: closeModal
  }, "Cancel"), __jsx(_Button.Button, {
    onClick: closeWithSave
  }, "Finish"))))), trigger && /*#__PURE__*/(0, _react.cloneElement)(trigger, {
    onClick: function onClick() {
      return setIsOpen(!isOpen);
    }
  }));
};

exports.ImageCrop = ImageCrop;
//# sourceMappingURL=ImageCrop.js.map