import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
import classNames from 'classnames';
import { get, pick, isNull, generateImg, dataURLToBlob, getTransforms, addEventListenerWrapper, getFileByRect } from '@zhst/func';
import Align from 'rc-align';
import { Empty, AttachImage } from '..';
import { Cropper, Viewer, EVENT_VIEWER_TRANSFORM_CHANGE, EVENT_VIEWER_READY, EVENT_CROP_START, EVENT_CROP_END } from "../ImageEditor";
import BtnGroup from "./components/BtnGroup";
import "./index.less";
import { defaultAlignOption, CROP_TYPE } from "../utils/constants";
import { getOdRect, getExtendRect, getTransformRect, getRotateImg } from "./bigImagePreviewHelper";
var componentName = "zhst-image__img-view";
var cropBtnDataSource = [{
  key: 'close',
  icon: 'icon-danchuangguanbi',
  title: '退出'
}, {
  key: 'autoCrop',
  icon: 'icon-zidong',
  title: '智能框选'
}, {
  key: 'customCrop',
  icon: 'icon-shoudong',
  title: '手动框选'
}];
var operateBtnDataSource = [{
  key: 'zoomOut',
  icon: 'icon-fangda',
  title: '放大'
}, {
  key: 'zoomIn',
  icon: 'icon-suoxiao',
  title: '缩小'
}, {
  key: 'reset',
  icon: 'icon-zhongzhi3',
  title: '重置图片'
}];
export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var width = props.width,
    height = props.height,
    _props$showScore = props.showScore,
    showScore = _props$showScore === void 0 ? false : _props$showScore,
    data = props.data,
    _props$showOpt = props.showOpt,
    showOpt = _props$showOpt === void 0 ? false : _props$showOpt,
    _props$showAttachImgL = props.showAttachImgLabel,
    showAttachImgLabel = _props$showAttachImgL === void 0 ? true : _props$showAttachImgL,
    _props$screenshotButt = props.screenshotButtonAlign,
    screenshotButtonAlign = _props$screenshotButt === void 0 ? defaultAlignOption : _props$screenshotButt,
    _props$screenshotButt2 = props.screenshotButtonRender,
    screenshotButtonRender = _props$screenshotButt2 === void 0 ? function () {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          color: '#fff',
          width: '80px',
          top: 0,
          fontSize: 12
        }
      }, "\u56DE\u8C03DOM");
    } : _props$screenshotButt2,
    _props$hideLeftTopBtn = props.hideLeftTopBtn,
    hideLeftTopBtn = _props$hideLeftTopBtn === void 0 ? true : _props$hideLeftTopBtn,
    onDraw = props.onDraw,
    _props$viewOption = props.viewOption,
    viewOption = _props$viewOption === void 0 ? {} : _props$viewOption,
    type = props.type,
    hideTypeBtns = props.hideTypeBtns,
    customEmpty = props.customEmpty;
  var imageKey = data.imageKey,
    attachImg = data.attachImg,
    odRect = data.odRect,
    score = data.score,
    _data$objects = data.objects,
    objects = _data$objects === void 0 ? [] : _data$objects;
  var imgContainerRef = React.useRef(null);

  // ============================= viewer  =========================
  var imgInsRef = useRef(null);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isImgReady = _useState2[0],
    setIsImgReady = _useState2[1];
  useEffect(function () {
    if (!(imgContainerRef !== null && imgContainerRef !== void 0 && imgContainerRef.current)) return;
    var handleReady = addEventListenerWrapper(imgContainerRef.current, EVENT_VIEWER_READY, function () {
      setIsImgReady(true);
    });
    var handleTransformChange = addEventListenerWrapper(imgContainerRef.current, EVENT_VIEWER_TRANSFORM_CHANGE, function () {});
    imgInsRef.current = new Viewer(imgContainerRef.current, _objectSpread(_objectSpread({}, viewOption), {}, {
      fitScaleAsMinScale: true,
      image: generateImg(imageKey)
    }));
    return function () {
      var _imgInsRef$current, _imgInsRef$current$de;
      handleReady === null || handleReady === void 0 || handleReady.remove();
      handleTransformChange === null || handleTransformChange === void 0 || handleTransformChange.remove();
      imgInsRef === null || imgInsRef === void 0 || (_imgInsRef$current = imgInsRef.current) === null || _imgInsRef$current === void 0 || (_imgInsRef$current$de = _imgInsRef$current.destroy) === null || _imgInsRef$current$de === void 0 || _imgInsRef$current$de.call(_imgInsRef$current);
      imgInsRef.current = null;
    };
  }, [imageKey]);

  // ============================= viewer操作按钮 =========================
  var handleOptClick = function handleOptClick(v) {
    var _imgInsRef$current2, _imgInsRef$current2$s, _imgInsRef$current3, _imgInsRef$current3$s, _imgInsRef$current4, _imgInsRef$current4$r;
    switch (v) {
      case 'zoomOut':
        imgInsRef === null || imgInsRef === void 0 || (_imgInsRef$current2 = imgInsRef.current) === null || _imgInsRef$current2 === void 0 || (_imgInsRef$current2$s = _imgInsRef$current2.scaleTo) === null || _imgInsRef$current2$s === void 0 || _imgInsRef$current2$s.call(_imgInsRef$current2, 0.1);
        break;
      case 'zoomIn':
        imgInsRef === null || imgInsRef === void 0 || (_imgInsRef$current3 = imgInsRef.current) === null || _imgInsRef$current3 === void 0 || (_imgInsRef$current3$s = _imgInsRef$current3.scaleTo) === null || _imgInsRef$current3$s === void 0 || _imgInsRef$current3$s.call(_imgInsRef$current3, -0.1);
        break;
      case 'reset':
        imgInsRef === null || imgInsRef === void 0 || (_imgInsRef$current4 = imgInsRef.current) === null || _imgInsRef$current4 === void 0 || (_imgInsRef$current4$r = _imgInsRef$current4.reset) === null || _imgInsRef$current4$r === void 0 || _imgInsRef$current4$r.call(_imgInsRef$current4, -0.1);
        break;
    }
  };

  // ============================= cropper  =========================
  // 手动截图相关参数
  var cropInsRef = useRef(null);
  var _useState3 = useState(showOpt),
    _useState4 = _slicedToArray(_useState3, 2),
    showCrop = _useState4[0],
    setShowCrop = _useState4[1];
  var _useState5 = useState(type || CROP_TYPE['AUTO']),
    _useState6 = _slicedToArray(_useState5, 2),
    cropType = _useState6[0],
    setCropType = _useState6[1];

  // 自动截图相关参数
  var _useState7 = useState([]),
    _useState8 = _slicedToArray(_useState7, 2),
    odList = _useState8[0],
    setOdList = _useState8[1];
  var _useState9 = useState([]),
    _useState10 = _slicedToArray(_useState9, 2),
    extendOdList = _useState10[0],
    setExtendOdList = _useState10[1];
  var _useState11 = useState(null),
    _useState12 = _slicedToArray(_useState11, 2),
    selectRectId = _useState12[0],
    setSelectRectId = _useState12[1];

  // 定位按钮相关参数
  var alginContainerRef = useRef(null);
  var alignRef = useRef(null);
  var _useState13 = useState(null),
    _useState14 = _slicedToArray(_useState13, 2),
    cropRect = _useState14[0],
    setCropRect = _useState14[1];

  // 选中的版本号
  var _useState15 = useState(null),
    _useState16 = _slicedToArray(_useState15, 2),
    selectAlgorithmVersion = _useState16[0],
    setSelectAlgorithmVersion = _useState16[1];
  var handlerCropStartRef = useRef(null);
  var handlerCropEndRef = useRef(null);
  var handleShapeSelectRef = useRef(null);
  useEffect(function () {
    initData(objects);
    return function () {
      var _imgInsRef$current5, _imgInsRef$current5$c, _handlerCropStartRef$, _handlerCropEndRef$cu, _handleShapeSelectRef, _cropInsRef$current, _cropInsRef$current$d;
      (_imgInsRef$current5 = imgInsRef.current) === null || _imgInsRef$current5 === void 0 || (_imgInsRef$current5$c = _imgInsRef$current5.clearShape) === null || _imgInsRef$current5$c === void 0 || _imgInsRef$current5$c.call(_imgInsRef$current5);
      (_handlerCropStartRef$ = handlerCropStartRef.current) === null || _handlerCropStartRef$ === void 0 || _handlerCropStartRef$.remove();
      (_handlerCropEndRef$cu = handlerCropEndRef.current) === null || _handlerCropEndRef$cu === void 0 || _handlerCropEndRef$cu.remove();
      (_handleShapeSelectRef = handleShapeSelectRef.current) === null || _handleShapeSelectRef === void 0 || _handleShapeSelectRef.remove();
      cropInsRef === null || cropInsRef === void 0 || (_cropInsRef$current = cropInsRef.current) === null || _cropInsRef$current === void 0 || (_cropInsRef$current$d = _cropInsRef$current.destroy) === null || _cropInsRef$current$d === void 0 || _cropInsRef$current$d.call(_cropInsRef$current);
      cropInsRef.current = null;
    };
  }, [isImgReady, showCrop, cropType, imageKey]);

  // 初始化页面的绘制矩形
  var initData = function initData(_objects) {
    var imgIns = imgInsRef.current;
    var _odRect = odRect;
    //清理crop
    setCropRect(null);
    if (!isImgReady) return;
    if (!showCrop) {
      var _imgIns$addShape;
      imgIns === null || imgIns === void 0 || (_imgIns$addShape = imgIns.addShape) === null || _imgIns$addShape === void 0 || _imgIns$addShape.call(imgIns, {
        x: get(_odRect, 'x', 0),
        y: get(_odRect, 'y', 0),
        w: get(_odRect, 'w', 0),
        h: get(_odRect, 'h', 0),
        selectAble: false
      });
      return;
    }

    // 自动模式
    if (cropType === CROP_TYPE['AUTO']) {
      var handleGetOD = function handleGetOD(odList) {
        var imgSize = imgIns.getImgSize();
        var shapeList = odList.map(function (rect) {
          return _objectSpread(_objectSpread({}, rect), {}, {
            selectAble: true,
            id: ['id'],
            algorithmVersion: rect.algorithmVersion
          });
        });
        imgIns.replaceShape(shapeList);
        //顺便吧扩展框拿到
        var extendRect = shapeList.map(function (rect) {
          // @ts-ignore
          var _extendRect = getExtendRect(rect, imgSize.w, imgSize.h, rect.algorithmVersion);
          return _objectSpread(_objectSpread({}, rect), _extendRect);
        });
        setExtendOdList(extendRect);
        imgIns.replaceShape(shapeList);
        // 框选监听事件
        handleShapeSelectRef.current = addEventListenerWrapper(imgContainerRef.current, 'shape-select', /*#__PURE__*/function () {
          var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
            var id, selectShape, axisRect, _rect2;
            return _regeneratorRuntime().wrap(function _callee$(_context) {
              while (1) switch (_context.prev = _context.next) {
                case 0:
                  id = e.detail;
                  setSelectRectId(id);
                  selectShape = shapeList.find(function (v) {
                    return v['id'] === id;
                  });
                  console.log('selectShape', selectShape);
                  if (selectShape) {
                    setSelectAlgorithmVersion(selectShape['algorithmVersion']);
                    //换算成屏幕坐标
                    axisRect = imgIns.imgRectAxisToCanvasAxisRect(selectShape);
                    _rect2 = {
                      x: axisRect.x2 > axisRect.x ? axisRect.x : axisRect.x2,
                      y: axisRect.y2 > axisRect.y ? axisRect.y : axisRect.y2,
                      w: Math.abs(axisRect.x2 - axisRect.x),
                      h: Math.abs(axisRect.y2 - axisRect.y)
                    };
                    setCropRect(_rect2);
                    onDraw === null || onDraw === void 0 || onDraw({
                      rectList: [_rect2],
                      extendRectList: [_rect2],
                      imgKey: imageKey,
                      selectIndex: id
                    });
                  } else {
                    // @ts-ignore
                    setCropRect(null);
                  }
                case 5:
                case "end":
                  return _context.stop();
              }
            }, _callee);
          }));
          return function (_x) {
            return _ref.apply(this, arguments);
          };
        }());
      };
      // @ts-ignore
      var rect = getOdRect({
        objects: _objects
      });
      setOdList(rect);
      handleGetOD(rect);
    }

    // 手动模式
    if (cropType === CROP_TYPE['CUSTOM']) {
      var _imgIns$clearShape;
      // 手动框选状态预先清除imgIns
      imgIns === null || imgIns === void 0 || (_imgIns$clearShape = imgIns.clearShape) === null || _imgIns$clearShape === void 0 || _imgIns$clearShape.call(imgIns);
      handlerCropStartRef.current = addEventListenerWrapper(imgContainerRef.current, EVENT_CROP_START, function () {
        setSelectAlgorithmVersion(null);
        setCropRect(null);
      });
      handlerCropEndRef.current = addEventListenerWrapper(imgContainerRef.current, EVENT_CROP_END, /*#__PURE__*/function () {
        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
          var _alignRef$current, _alignRef$current$for;
          var data, _rect, _cropData;
          return _regeneratorRuntime().wrap(function _callee2$(_context2) {
            while (1) switch (_context2.prev = _context2.next) {
              case 0:
                data = event.detail;
                setSelectAlgorithmVersion(null);
                _rect = {
                  x: data.left,
                  y: data.top,
                  w: data.width,
                  h: data.height
                };
                setCropRect(_rect);
                _context2.next = 6;
                return getCropInfo({
                  type: cropType,
                  rect: _rect
                });
              case 6:
                _cropData = _context2.sent;
                onDraw === null || onDraw === void 0 || onDraw(_cropData);
                alignRef === null || alignRef === void 0 || (_alignRef$current = alignRef.current) === null || _alignRef$current === void 0 || (_alignRef$current$for = _alignRef$current.forceAlign) === null || _alignRef$current$for === void 0 || _alignRef$current$for.call(_alignRef$current);
              case 9:
              case "end":
                return _context2.stop();
            }
          }, _callee2);
        }));
        return function (_x2) {
          return _ref2.apply(this, arguments);
        };
      }());
      cropInsRef.current = new Cropper(imgContainerRef.current, {
        showMask: true,
        type: 'arrow',
        viewer: imgIns
      });
    }
  };

  //  获取框选的截图框信息
  var getCropInfo = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(opt) {
      var type, rect, cropType, cropRect, imgIns, transform, newImgKey, rectList, extendRectList, selectIndex, shapes, shapeIds, newRect, _data, data;
      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
        while (1) switch (_context5.prev = _context5.next) {
          case 0:
            type = opt.type, rect = opt.rect;
            cropType = type;
            cropRect = rect;
            imgIns = imgInsRef.current;
            transform = imgIns.targetTransform;
            newImgKey = imageKey;
            rectList = [];
            extendRectList = [];
            selectIndex = 0;
            _context5.t0 = cropType;
            _context5.next = _context5.t0 === CROP_TYPE['AUTO'] ? 12 : 18;
            break;
          case 12:
            shapes = imgIns.getSelectShape();
            shapeIds = shapes.map(function (v) {
              return v['id'];
            });
            rectList = odList.filter(function (v) {
              return shapeIds.includes(v['id']);
            }).map(function (item) {
              if (item.algorithmVersion === 'OBJECT_TYPE_FACE' || item.objectType === 'OBJECT_TYPE_FACE') {
                if (!isNull(item.extendBox)) {
                  return _objectSpread(_objectSpread({}, item), {}, {
                    w: get(item, 'extendBox.w'),
                    h: get(item, 'extendBox.h'),
                    x: get(item, 'extendBox.x'),
                    y: get(item, 'extendBox.y')
                  });
                }
              } else {
                return item;
              }
            });
            extendRectList = extendOdList.filter(function (v) {
              return shapeIds.includes(v['id']);
            }).map(function (v) {
              return pick(v, ['x', 'y', 'w', 'h', 'algorithmVersion', 'id']);
            });
            selectIndex = rectList.findIndex(function (v) {
              return v['id'] === selectRectId;
            });
            return _context5.abrupt("break", 23);
          case 18:
            //获取旋转过的坐标
            // @ts-ignore
            newRect = getTransformRect(imgIns.image, transform, cropRect); //判断是不是旋转过
            if (get(transform, 'rotate', 0) % 360 != 0) {
              _data = getRotateImg(imgIns.image, get(transform, 'rotate', 0)); //在画布上画旋转后的图片
              newImgKey = _data;
            }
            rectList.push(newRect);
            extendRectList.push(newRect);
            return _context5.abrupt("break", 23);
          case 23:
            _context5.next = 25;
            return Promise.all(extendRectList.map( /*#__PURE__*/function () {
              var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(rect, index) {
                var file, imgKey;
                return _regeneratorRuntime().wrap(function _callee3$(_context3) {
                  while (1) switch (_context3.prev = _context3.next) {
                    case 0:
                      _context3.next = 2;
                      return getFileByRect(imgIns.image, rect);
                    case 2:
                      file = _context3.sent;
                      imgKey = file;
                      extendRectList[index] = _objectSpread(_objectSpread({}, rect), {}, {
                        imgKey: imgKey
                      });
                    case 5:
                    case "end":
                      return _context3.stop();
                  }
                }, _callee3);
              }));
              return function (_x4, _x5) {
                return _ref4.apply(this, arguments);
              };
            }()));
          case 25:
            _context5.next = 27;
            return Promise.all(rectList.map( /*#__PURE__*/function () {
              var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(rect, index) {
                var faceCorrectImage, faceCorrectImageKey, base64, blobData, file, newRect;
                return _regeneratorRuntime().wrap(function _callee4$(_context4) {
                  while (1) switch (_context4.prev = _context4.next) {
                    case 0:
                      faceCorrectImage = rect['faceCorrectImage'];
                      if (faceCorrectImage) {
                        base64 = "data:image/jpg;base64,".concat(faceCorrectImage);
                        blobData = dataURLToBlob(base64);
                        file = new window.File([blobData], "".concat(new Date().getTime()));
                        faceCorrectImageKey = file;
                      }
                      newRect = _objectSpread(_objectSpread({}, rect), faceCorrectImageKey ? {
                        faceCorrectImageKey: faceCorrectImageKey
                      } : {});
                      delete newRect['faceCorrectImage'];
                      rectList[index] = newRect;
                    case 5:
                    case "end":
                      return _context4.stop();
                  }
                }, _callee4);
              }));
              return function (_x6, _x7) {
                return _ref5.apply(this, arguments);
              };
            }()));
          case 27:
            data = {
              rectList: rectList,
              extendRectList: extendRectList,
              selectIndex: selectIndex,
              imgKey: newImgKey
            };
            return _context5.abrupt("return", data);
          case 29:
          case "end":
            return _context5.stop();
        }
      }, _callee5);
    }));
    return function getCropInfo(_x3) {
      return _ref3.apply(this, arguments);
    };
  }();

  // 操作界面判断
  var handleCropBtnClick = function handleCropBtnClick(v) {
    switch (v) {
      case 'close':
        setShowCrop(false);
        break;
      case 'autoCrop':
        setCropType(CROP_TYPE['AUTO']);
        break;
      case 'customCrop':
        setCropType(CROP_TYPE['CUSTOM']);
        break;
    }
  };

  // ============================== Ref ===============================
  useImperativeHandle(ref, function () {
    return {
      imgInsRef: imgInsRef,
      setShowCrop: setShowCrop,
      initData: initData,
      getCropInfo: getCropInfo
    };
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(componentName)),
    style: {
      height: height,
      width: width
    }
  }, imageKey ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(componentName, "-main"), cropType === CROP_TYPE['AUTO'] && "".concat(componentName, "-main--cursor")),
    ref: imgContainerRef
    // style={{ width: width, height: height }}
  }), !hideLeftTopBtn && /*#__PURE__*/React.createElement(BtnGroup, {
    className: classNames("".concat(componentName, "-opt")),
    dataSource: operateBtnDataSource,
    onClick: handleOptClick,
    placement: "left"
  }), !hideTypeBtns && showCrop && /*#__PURE__*/React.createElement(BtnGroup, {
    circle: true,
    className: classNames("".concat(componentName, "-crop-opt")),
    dataSource: cropBtnDataSource,
    onClick: handleCropBtnClick,
    selectKey: cropType === CROP_TYPE['AUTO'] ? 'autoCrop' : 'customCrop'
  }), showCrop && cropRect && screenshotButtonRender && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    ref: alginContainerRef,
    className: classNames("".concat(componentName, "-align")),
    style: Object.assign({
      width: cropRect.w,
      height: cropRect.h
    }, getTransforms({
      translateX: cropRect.x,
      translateY: cropRect.y
    }))
  }), /*#__PURE__*/React.createElement(Align, {
    ref: alignRef,
    monitorWindowResize: true,
    align: screenshotButtonAlign,
    target: function target() {
      return alginContainerRef.current;
    }
  }, screenshotButtonRender({
    model: 'IMAGE',
    // @ts-ignore
    getCropInfo: getCropInfo,
    setShowCrop: setShowCrop,
    cropType: cropType,
    selectAlgorithmVersion: selectAlgorithmVersion
  }))), (attachImg === null || attachImg === void 0 ? void 0 : attachImg.length) && !showCrop && /*#__PURE__*/React.createElement(AttachImage, {
    showAttachImgLabel: showAttachImgLabel,
    data: attachImg
  }), (showScore || score) && /*#__PURE__*/React.createElement("div", {
    style: {
      bottom: 20
    },
    className: classNames("".concat(componentName, "__face-score"))
  }, "\u4EBA\u8138\u8D28\u91CF\u5206\uFF1A".concat(Number(score).toFixed(2)))) : /*#__PURE__*/React.createElement("div", {
    style: {
      height: '100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }
  }, customEmpty || /*#__PURE__*/React.createElement(Empty, {
    style: {
      margin: 0
    },
    image: Empty.PRESENTED_IMAGE_SIMPLE,
    description: "\u6682\u65E0\u6570\u636E"
  })));
});
BigImagePreview.displayName = 'BigImagePreview';
export default BigImagePreview;