import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle } from 'react';
import Cropper from 'react-cropper';
import classNames from 'classnames';
import { debounce } from './utils';
import CropperToolbar from './components/toolbar';
import Button from '../button';
import Spin from '../spin';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
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__*/forwardRef(({
  className,
  style,
  resultType = 'blob',
  onCropperDone,
  toolbar,
  ...props
}, ref) => {
  const cropperInstanceRef = useRef();
  const [loaded, setLoaded] = useState(false);
  useImperativeHandle(ref, () => cropperInstanceRef.current);
  const [boxSize, setBoxSize] = useState({
    width: undefined,
    height: undefined
  });
  const [ratio, setRatio] = useState(defaultOption.aspectRatio);

  // 底图伸缩 以及 cropBox大小变化均会触发这个
  const handleCropBoxChange = useCallback(event => {
    const {
      detail: {
        width: w,
        height: h
      }
    } = event;
    setBoxSize({
      width: Math.round(w),
      height: Math.round(h)
    });
  }, []);
  const handleRatioChange = useCallback(ratio => {
    if (cropperInstanceRef.current) {
      cropperInstanceRef.current.setAspectRatio(ratio);
      setRatio(ratio);
    }
  }, []);
  const handleCropperReady = useCallback(() => {
    if (cropperInstanceRef.current) {
      const {
        width,
        height
      } = cropperInstanceRef.current.getData();
      setBoxSize({
        width,
        height
      });
    }
    setLoaded(true);
  }, []);
  const handleWidthChange = useCallback(width => {
    if (width) {
      setBoxSize(size => ({
        ...size,
        width
      }));
      if (cropperInstanceRef.current) {
        const {
          ...info
        } = cropperInstanceRef.current.getData();
        cropperInstanceRef.current.setData({
          ...info,
          width
        });
      }
    }
  }, []);
  const handleHeightChange = useCallback(height => {
    if (height) {
      setBoxSize(size => ({
        ...size,
        height
      }));
      if (cropperInstanceRef.current) {
        const {
          ...info
        } = cropperInstanceRef.current.getData();
        cropperInstanceRef.current.setData({
          ...info,
          height
        });
      }
    }
  }, []);
  const handleCropClick = 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__*/_jsxs("div", {
    className: classNames('wii-cropper', className),
    style: style,
    children: [/*#__PURE__*/_jsx(CropperToolbar, {
      extra: /*#__PURE__*/_jsx(Button, {
        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__*/_jsx(Spin, {
      spinning: !loaded,
      children: /*#__PURE__*/_jsx("div", {
        className: "wii-cropper-content",
        children: /*#__PURE__*/_jsx(Cropper, {
          style: {
            maxHeight: '600px'
          }
          // Cropper.js options
          ,
          ...defaultOption,
          ...props,
          crop: debounce(handleCropBoxChange, 10, true, null),
          onInitialized: instance => {
            cropperInstanceRef.current = instance;
          },
          ready: handleCropperReady
        })
      })
    })]
  });
});
export default WauCropper;