import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { r as regenerator } from '../_verture/index-beef914f.js';
import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
import clsx from 'clsx';
import DoubleRight from '@iam-com/icons/DoubleRight';
import CloseIcon from '@iam-com/icons/Close';
import Check from '@iam-com/icons/Check';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
import { Loading } from '../Loading/index.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '@para-ui/core/GlobalContext';
import '@iam-com/icons/LoadingF';

var en = {
  tryAgain: 'Try again',
  swipe: 'Swipe right to fill puzzle'
};

var zh = {
  tryAgain: '再试一次',
  swipe: '向右滑动填充拼图'
};

var localeJson = {
  zh: zh,
  en: en
};

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-drag-verify {\n  width: 100%;\n  position: relative;\n}\n.paraui-v3-drag-verify > svg {\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  z-index: 10;\n  cursor: pointer;\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-img {\n  position: relative;\n  border-radius: 4px;\n  overflow: hidden;\n  line-height: 0;\n  min-height: 60px;\n}\n.paraui-v3-drag-verify > .slider-img .slider-img-bg {\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n}\n.paraui-v3-drag-verify > .slider-img .slider-img-move {\n  position: absolute;\n  left: 0;\n  height: auto;\n}\n.paraui-v3-drag-verify > .slider-move {\n  position: relative;\n  text-align: center;\n  line-height: 32px;\n  height: 32px;\n  margin-top: 12px;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-bg {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  background-color: rgba(171, 176, 185, 0.12);\n  height: 32px;\n  border-radius: 4px;\n  border: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 32px;\n  width: 2px;\n  border-bottom-left-radius: 4px;\n  border-top-left-radius: 4px;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box {\n  position: absolute;\n  top: 0;\n  left: -1px;\n  width: 32px;\n  height: 32px;\n  background: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box:hover .svg-right {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-right {\n  display: inline-block;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-close {\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-check {\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-text {\n  color: rgba(46, 55, 67, 0.4);\n  font-size: 14px;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(54, 102, 214);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(54, 102, 214);\n  border-top: 1px solid rgb(54, 102, 214);\n  border-bottom: 1px solid rgb(54, 102, 214);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask > .slider-move-box > .svg-right {\n  color: #fff;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(235, 96, 84);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(235, 96, 84);\n  border-top: 1px solid rgb(235, 96, 84);\n  border-bottom: 1px solid rgb(235, 96, 84);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-close {\n  display: inline-block;\n  color: #fff;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-right {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-check {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(83, 195, 27);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(83, 195, 27);\n  border-top: 1px solid rgb(83, 195, 27);\n  border-bottom: 1px solid rgb(83, 195, 27);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-close {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-right {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-check {\n  display: inline-block;\n  color: #fff;\n}";
styleInject(css_248z);

var DragVerify = function DragVerify(props) {
  var className = props.className,
    style = props.style,
    refresh = props.refresh,
    getImgInfo = props.getImgInfo,
    verify = props.verify,
    width = props.width,
    height = props.height;
  var intl = useFormatMessage('DragVerify', localeJson);
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    refreshCom = _useState2[0],
    setRefreshCom = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    loading = _useState4[0],
    setLoading = _useState4[1];
  var refDom = useRef(null);
  var constData = useRef({
    getImgInfo: getImgInfo,
    verify: verify
  });
  var prefixCls = $prefixCls + '-drag-verify';
  constData.current.getImgInfo = getImgInfo;
  constData.current.verify = verify;
  useEffect(function () {
    reset();
    getImgInfoReq();
    return function () {
      clearTimeout(constData.current.timerError);
      clearTimeout(constData.current.timerSuccess);
    };
  }, [refresh, refreshCom]);
  /** 获取图片信息 */
  var getImgInfoReq = function getImgInfoReq() {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
      var result;
      return regenerator.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            constData.current.padding = true;
            setLoading(true);
            _context.next = 4;
            return constData.current.getImgInfo();
          case 4:
            result = _context.sent;
            constData.current.imgInfo = result;
            initImg();
          case 7:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
  };
  /** 校验滑块 */
  var sliderPosiCheck = function sliderPosiCheck(x, callback) {
    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
      var result;
      return regenerator.wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            _context2.next = 2;
            return constData.current.verify(x, constData.current.verify);
          case 2:
            result = _context2.sent;
            callback(result);
          case 4:
          case "end":
            return _context2.stop();
        }
      }, _callee2);
    }));
  };
  /** 初始化图片 */
  var initImg = function initImg() {
    var _a;
    if (!refDom.current) return;
    // 背景图
    var imgBg = document.createElement('img');
    imgBg.setAttribute('src', (_a = constData.current.imgInfo) === null || _a === void 0 ? void 0 : _a.sourceImage);
    imgBg.style.display = 'none';
    // 滑动的图片
    var imgMove = document.createElement('img');
    constData.current.imgMove = imgMove;
    imgMove.className = 'slider-img-move';
    imgMove.style.display = 'none';
    var sliderImgEle = refDom.current.querySelector('.slider-img');
    var refreshEle = refDom.current.querySelector('.refresh');
    if (!sliderImgEle || !refreshEle) return;
    refreshEle.style.display = 'none';
    sliderImgEle.innerHTML = '';
    sliderImgEle.append(imgBg);
    imgBg.onload = function () {
      var _a;
      imgBg.style.display = 'inline-block'; // 必须先显示图片,要不然ie10获取不到图片
      imgMove.setAttribute('src', (_a = constData.current.imgInfo) === null || _a === void 0 ? void 0 : _a.newImage);
      var a = imgBg.width;
      imgBg.className = 'slider-img-bg';
      imgBg.style.display = 'inline-block';
      if (!refDom.current) return;
      var sliderImgEle = refDom.current.querySelector('.slider-img');
      //const sliderImgEleRect = sliderImgEle?.getBoundingClientRect();
      var b = sliderImgEle === null || sliderImgEle === void 0 ? void 0 : sliderImgEle.clientWidth;
      constData.current.imgScale = a / b;
      sliderImgEle === null || sliderImgEle === void 0 ? void 0 : sliderImgEle.append(imgMove);
      imgMove.onload = function () {
        var _a;
        constData.current.padding = false;
        imgMove.style.display = 'inline-block'; // 必须先显示图片,要不然ie10获取不到图片
        refreshEle.style.display = 'inline-block';
        imgMove.width = imgMove.width / constData.current.imgScale;
        imgMove.style.top = ((_a = constData.current.imgInfo) === null || _a === void 0 ? void 0 : _a.y) / constData.current.imgScale + 'px';
        setLoading(false);
      };
    };
    registerEvents(imgBg, imgMove);
  };
  /** 注册事件 */
  var registerEvents = function registerEvents(imgBg, imgMove) {
    var sliderBox = refDom.current;
    if (!sliderBox) return;
    var moveDom = sliderBox.querySelector('.slider-move-box'); // 滑块
    var moveProgress = sliderBox.querySelector('.slider-move-mask'); // 滑动距离元素
    var moveSliderEle = sliderBox.querySelector('.slider-move'); // 进度条的宽
    var sliderText = sliderBox.querySelector('.slider-move-text'); // 互动轨道显示的文字
    var moveSliderRect = moveSliderEle.getBoundingClientRect();
    var moveDomRect = moveDom.getBoundingClientRect();
    var moveDomWidth = moveDomRect.width; // 移动箭头的框
    var moveSliderWidth = moveSliderRect.width; // 进度条的宽
    // 移动
    var moveFunc = function moveFunc(event, e) {
      var moveW = event.pageX - e.pageX; // 鼠标移动的距离
      if (moveW < 0) moveW = 0;
      if (moveW + moveDomWidth > imgBg.width) moveW = imgBg.width - moveDomWidth;
      moveDom.style.left = "".concat(moveW - 1, "px");
      // 加一防止滑块与进度条之间有间隙
      moveProgress.style.width = "".concat(moveW < 2 ? 2 : moveW, "px");
      // 进度条走过的比例
      var ratio = moveW / (moveSliderWidth - moveDomWidth);
      var imgMoveWidth = (imgBg.width - imgMove.width) * ratio;
      imgMove.style.left = "".concat(imgMoveWidth, "px");
      sliderText.innerHTML = '';
    };
    // 抬起
    var endFunc = function endFunc() {
      sliderBox.classList.remove("".concat(prefixCls, "-move"));
      constData.current.padding = true;
      var X = parseFloat(imgMove.style.left);
      var handX = X * constData.current.imgScale;
      sliderPosiCheck(handX, function (result) {
        if (!result) {
          // 错误
          sliderBox.classList.add("".concat(prefixCls, "-error"));
          constData.current.timerError = setTimeout(function () {
            constData.current.padding = false;
            reset();
            sliderText.innerHTML = intl({
              id: 'tryAgain'
            }); // 再试一次
            getImgInfoReq();
          }, 1000);
          return;
        }
        sliderBox.classList.add("".concat(prefixCls, "-success"));
        /*constData.current.timerSuccess = setTimeout(() => {
            //constData.current.padding = false;
            //sliderBox.classList.remove(prefixCls + '-success');
        }, 1000);*/
      });
    };

    moveDom.onmousedown = function (e) {
      e.preventDefault();
      if (constData.current.padding) return;
      sliderBox.classList.add("".concat(prefixCls, "-move"));
      document.onmousemove = function (event) {
        moveFunc(event, e);
      };
      // 鼠标抬起
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        endFunc();
      };
    };
    moveDom.ontouchstart = function (touchE) {
      touchE.preventDefault();
      if (constData.current.padding) return;
      var e = touchE.touches[0];
      sliderBox.classList.add("".concat(prefixCls, "-move"));
      // 鼠标移动
      document.ontouchmove = function (touchEvent) {
        var event = touchEvent.touches[0];
        moveFunc(event, e);
      };
      // 鼠标抬起
      document.ontouchend = function () {
        document.ontouchmove = null;
        document.ontouchend = null;
        endFunc();
      };
    };
  };
  /** 复位 */
  var reset = function reset() {
    var sliderBox = refDom.current;
    if (!sliderBox) return;
    sliderBox.classList.remove(prefixCls + '-success');
    sliderBox.classList.remove(prefixCls + '-error');
    var moveDom = sliderBox.querySelector('.slider-move-box'); // 滑块
    var moveProgress = sliderBox.querySelector('.slider-move-mask'); // 滑动距离元素
    var sliderText = sliderBox.querySelector('.slider-move-text'); // 互动轨道显示的文字
    sliderText.innerHTML = intl({
      id: 'swipe'
    }); // 再试一次
    moveDom.style.left = '-1px';
    moveProgress.style.width = '0px';
    if (constData.current.imgMove) constData.current.imgMove.style.left = '0px';
  };
  /* 刷新 */
  var clickRefresh = function clickRefresh() {
    setRefreshCom(Math.random());
  };
  /* 处理标签内容 */
  var handStyle = function handStyle() {
    var obj = {};
    if (width) {
      var widthHand = width;
      if (typeof width === 'number') widthHand = width + 'px';
      obj.width = widthHand;
    }
    if (height) {
      var heightHand = height;
      if (typeof height === 'number') heightHand = height + 'px';
      obj.height = heightHand;
    }
    return obj;
  };
  var makeCls = function makeCls() {
    return clsx(prefixCls, className);
  };
  return jsxs("div", Object.assign({
    className: makeCls(),
    style: style,
    ref: refDom
  }, {
    children: [jsxs("svg", Object.assign({
      onClick: clickRefresh,
      className: 'refresh',
      width: "26.529",
      height: "26.017",
      viewBox: "0 0 26.529 26.017"
    }, {
      children: [jsxs("defs", {
        children: [jsxs("filter", Object.assign({
          id: "a",
          x: "0",
          y: "0",
          width: "26.529",
          height: "17",
          filterUnits: "userSpaceOnUse"
        }, {
          children: [jsx("feOffset", {
            dy: "1"
          }), jsx("feGaussianBlur", {
            stdDeviation: "1",
            result: "b"
          }), jsx("feFlood", {}), jsx("feComposite", {
            operator: "in",
            in2: "b"
          }), jsx("feComposite", {
            in: "SourceGraphic"
          })]
        })), jsxs("filter", Object.assign({
          id: "c",
          x: "0",
          y: "9.017",
          width: "26.529",
          height: "17",
          filterUnits: "userSpaceOnUse"
        }, {
          children: [jsx("feOffset", {
            dy: "1"
          }), jsx("feGaussianBlur", {
            stdDeviation: "1",
            result: "d"
          }), jsx("feFlood", {}), jsx("feComposite", {
            operator: "in",
            in2: "d"
          }), jsx("feComposite", {
            in: "SourceGraphic"
          })]
        }))]
      }), jsxs("g", Object.assign({
        style: {
          opacity: 0.7,
          isolation: 'isolate'
        },
        transform: "translate(-286.735 -95.991)"
      }, {
        children: [jsx("g", Object.assign({
          transform: "translate(288 96)"
        }, {
          children: jsx("rect", {
            style: {
              fill: 'none'
            },
            width: "24",
            height: "24"
          })
        })), jsxs("g", Object.assign({
          transform: "translate(289.735 97.991)"
        }, {
          children: [jsx("g", Object.assign({
            style: {
              filter: 'url(#a)'
            },
            transform: "matrix(1, 0, 0, 1, -3, -2)"
          }, {
            children: jsx("path", {
              style: {
                fill: '#FFFFFF'
              },
              d: "M577.409,536.791a1,1,0,0,0,1-1A8,8,0,0,1,592.817,531h0c.077.1.149.207.22.312l-1.911-.765a1,1,0,1,0-.743,1.856l3.7,1.483a1,1,0,0,0,1.3-.557l1.482-3.7a1,1,0,1,0-1.857-.744l-.448,1.12c-.048-.067-.093-.137-.143-.2h0a10,10,0,0,0-18.009,5.989A1,1,0,0,0,577.409,536.791Z",
              transform: "translate(-573.41 -523.79)"
            })
          })), jsx("g", Object.assign({
            style: {
              filter: 'url(#c)'
            },
            transform: "matrix(1, 0, 0, 1, -3, -2)"
          }, {
            children: jsx("path", {
              style: {
                fill: '#FFFFFF'
              },
              d: "M595.938,534.808a1,1,0,0,0-1,1,8,8,0,0,1-14.409,4.79h0c-.076-.1-.148-.206-.219-.312l1.911.765a1,1,0,0,0,.743-1.857l-3.7-1.482a1,1,0,0,0-1.3.557l-1.482,3.7a1,1,0,0,0,1.856.743l.449-1.12c.047.067.093.136.142.2h0a10,10,0,0,0,18.009-5.989A1,1,0,0,0,595.938,534.808Z",
              transform: "translate(-573.41 -523.79)"
            })
          }))]
        }))]
      }))]
    })), jsx("div", {
      className: "slider-img",
      style: handStyle()
    }), jsxs("div", Object.assign({
      className: "slider-move"
    }, {
      children: [jsx("div", {
        className: "slider-move-bg"
      }), jsx("div", Object.assign({
        className: "slider-move-mask"
      }, {
        children: jsxs("div", Object.assign({
          className: "slider-move-box"
        }, {
          children: [jsx(DoubleRight, {
            className: 'svg-right'
          }), jsx(CloseIcon, {
            className: 'svg-close'
          }), jsx(Check, {
            className: 'svg-check'
          })]
        }))
      })), jsx("span", Object.assign({
        className: "slider-move-text"
      }, {
        children: intl({
          id: 'swipe'
        })
      }))]
    })), loading && jsx(Loading, {})]
  }));
};

export { DragVerify, DragVerify as default };
