import _useId from "parsec-hooks/lib/idHooks";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import jigsaw from 'jigsaw-captcha-js';
import React, { useCallback, useEffect, useRef, useImperativeHandle } from 'react';
import { View } from 'remax/one';
import rpxToPx from '../rpx-to-px';
export default /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var imgs = _ref.imgs,
      _ref$width = _ref.width,
      width = _ref$width === void 0 ? 620 : _ref$width,
      _ref$height = _ref.height,
      height = _ref$height === void 0 ? 310 : _ref$height,
      onFail = _ref.onFail,
      onRefresh = _ref.onRefresh,
      _onSuccess = _ref.onSuccess;

  var id = _useId();

  var preImg = useRef('');
  var init = useCallback(function () {
    var el = document.getElementById(id);
    (el === null || el === void 0 ? void 0 : el.firstChild) && (el === null || el === void 0 ? void 0 : el.removeChild(el.firstChild));
    jigsaw.init({
      el: el,
      imgs: imgs,
      width: rpxToPx(width),
      height: rpxToPx(height),
      onFail: onFail,
      onRefresh: onRefresh,
      onSuccess: function onSuccess() {
        _onSuccess === null || _onSuccess === void 0 ? void 0 : _onSuccess();
        setTimeout(function () {
          init();
        }, 1000);
      }
    });
  }, [height, id, imgs, onFail, onRefresh, _onSuccess, width]);
  useImperativeHandle(ref, function () {
    return {
      reset: init
    };
  });
  useEffect(function () {
    if (JSON.stringify(imgs) === preImg.current) return;
    preImg.current = JSON.stringify(imgs);
    init();
  }, [height, id, imgs, init, onFail, onRefresh, _onSuccess, width]);
  return /*#__PURE__*/React.createElement(View, {
    id: id
  });
});