"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _reactCropper = _interopRequireDefault(require("react-cropper"));
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("./utils");
var _toolbar = _interopRequireDefault(require("./components/toolbar"));
var _button = _interopRequireDefault(require("../button"));
var _spin = _interopRequireDefault(require("../spin"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
const defaultOption = {
  aspectRatio: 16 / 9,
  highlight: true,
  zoomable: true,
  // 是否可以伸缩图片
  // autoCropArea: 1, // 设置裁剪框大小 占图片的大小的比例
  cropBoxMovable: true,
  cropBoxResizable: true,
  dragMode: 'move',
  toggleDragModeOnDblclick: false,
  guides: true,
  crossOrigin: 'anonymous',
  // viewMode: 1, // 限制 裁剪框只能在底图的区域之内
  modal: true,
  // 不显示黑色的背景底色
  minContainerHeight: 500
};
const WauCropper = /*#__PURE__*/(0, _react.forwardRef)(({
  className,
  style,
  resultType = 'blob',
  onCropperDone,
  toolbar,
  ...props
}, ref) => {
  const cropperInstanceRef = (0, _react.useRef)();
  const [loaded, setLoaded] = (0, _react.useState)(false);
  (0, _react.useImperativeHandle)(ref, () => cropperInstanceRef.current);
  const [boxSize, setBoxSize] = (0, _react.useState)({
    width: undefined,
    height: undefined
  });
  const [ratio, setRatio] = (0, _react.useState)(defaultOption.aspectRatio);

  // 底图伸缩 以及 cropBox大小变化均会触发这个
  const handleCropBoxChange = (0, _react.useCallback)(event => {
    const {
      detail: {
        width: w,
        height: h
      }
    } = event;
    setBoxSize({
      width: Math.round(w),
      height: Math.round(h)
    });
  }, []);
  const handleRatioChange = (0, _react.useCallback)(ratio => {
    if (cropperInstanceRef.current) {
      cropperInstanceRef.current.setAspectRatio(ratio);
      setRatio(ratio);
    }
  }, []);
  const handleCropperReady = (0, _react.useCallback)(() => {
    if (cropperInstanceRef.current) {
      const {
        width,
        height
      } = cropperInstanceRef.current.getData();
      setBoxSize({
        width,
        height
      });
    }
    setLoaded(true);
  }, []);
  const handleWidthChange = (0, _react.useCallback)(width => {
    if (width) {
      setBoxSize(size => ({
        ...size,
        width
      }));
      if (cropperInstanceRef.current) {
        const {
          ...info
        } = cropperInstanceRef.current.getData();
        cropperInstanceRef.current.setData({
          ...info,
          width
        });
      }
    }
  }, []);
  const handleHeightChange = (0, _react.useCallback)(height => {
    if (height) {
      setBoxSize(size => ({
        ...size,
        height
      }));
      if (cropperInstanceRef.current) {
        const {
          ...info
        } = cropperInstanceRef.current.getData();
        cropperInstanceRef.current.setData({
          ...info,
          height
        });
      }
    }
  }, []);
  const handleCropClick = (0, _react.useCallback)(() => {
    if (cropperInstanceRef.current) {
      if (resultType === 'base64') {
        const url = cropperInstanceRef.current.getCroppedCanvas().toDataURL();
        onCropperDone === null || onCropperDone === void 0 ? void 0 : onCropperDone(url);
      } else {
        cropperInstanceRef.current.getCroppedCanvas().toBlob(blob => {
          onCropperDone === null || onCropperDone === void 0 ? void 0 : onCropperDone(blob);
        });
      }
    }
  }, [onCropperDone, resultType]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)('wii-cropper', className),
    style: style,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.default, {
      extra: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
        type: "primary",
        onClick: handleCropClick,
        disabled: !props.src,
        children: "\u88C1\u526A"
      }),
      ...toolbar,
      ratio: ratio,
      width: boxSize.width,
      height: boxSize.height,
      onRatioChange: handleRatioChange,
      onWidthChange: handleWidthChange,
      onHeightChange: handleHeightChange
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_spin.default, {
      spinning: !loaded,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "wii-cropper-content",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactCropper.default, {
          style: {
            maxHeight: '600px'
          }
          // Cropper.js options
          ,
          ...defaultOption,
          ...props,
          crop: (0, _utils.debounce)(handleCropBoxChange, 10, true, null),
          onInitialized: instance => {
            cropperInstanceRef.current = instance;
          },
          ready: handleCropperReady
        })
      })
    })]
  });
});
var _default = WauCropper;
exports.default = _default;