/*
 * @Author: codingfly
 * @Description:
 * @Date: 2021-09-16 15:01:03
 * @LastEditTime: 2021-09-17 13:21:40
 * @FilePath: \my-remax-ui\components\jigsaw\index.tsx
 */
import React, { useCallback, useEffect, useRef } from 'react';
import { View } from 'remax/one';
import rpxToPx from '../rpx-to-px';
import jigsaw from 'jigsaw-captcha-js';
import { guid } from '../_utils';
export default (function (props) {
  var _props$height = props.height,
      height = _props$height === void 0 ? 310 : _props$height,
      _props$width = props.width,
      width = _props$width === void 0 ? 620 : _props$width,
      imgs = props.imgs,
      fail = props.fail,
      onRefresh = props.onRefresh,
      success = props.success;
  var inerId = useRef(guid());
  var init = useCallback(function () {
    var el = document.getElementById(inerId.current);
    jigsaw.init({
      el: el,
      imgs: imgs,
      width: rpxToPx(width),
      height: rpxToPx(height),
      onFail: fail,
      onRefresh: onRefresh,
      onSuccess: function onSuccess() {
        return success();
      }
    });
  }, [height, inerId.current, imgs, fail, onRefresh, success, width]);
  useEffect(function () {
    init();
  }, [height, inerId.current, imgs, init, fail, onRefresh, success, width]);
  return /*#__PURE__*/React.createElement(View, {
    id: inerId.current
  });
});