import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import "core-js/modules/es.promise.js";
import "core-js/modules/es.array.flat.js";
import "core-js/modules/es.array.unscopables.flat.js";
import React, { useState, useCallback, useEffect } from 'react';
import Form from '../../../form';
import Input from '../../../input';
import Button from '../../../button';
import createField from '../../create-field';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const ProFormCaptcha = /*#__PURE__*/React.forwardRef((props, ref) => {
  const [count, setCount] = useState(props.countDown || 60);
  const [timing, setTiming] = useState(false);
  const [loading, setLoading] = useState();
  // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props tabUtil
  const {
    // eslint-disable-next-line
    rules,
    // eslint-disable-next-line
    name,
    phoneName,
    fieldProps,
    captchaTextRender = (paramsTiming, paramsCount) => {
      return paramsTiming ? `${paramsCount} 秒后重新获取` : '获取验证码';
    },
    captchaProps,
    value,
    onChange,
    ...restProps
  } = props;
  const onGetCaptcha = useCallback(async mobile => {
    try {
      setLoading(true);
      await restProps.onGetCaptcha(mobile);
      setLoading(false);
      setTiming(true);
    } catch (error) {
      setLoading(false);
      // eslint-disable-next-line no-console
      console.log(error);
    }
  }, []);
  useEffect(() => {
    let interval = 0;
    const {
      countDown
    } = props;
    if (timing) {
      interval = window.setInterval(() => {
        setCount(preSecond => {
          if (preSecond <= 1) {
            setTiming(false);
            clearInterval(interval);
            // 重置秒数
            return countDown || 60;
          }
          return preSecond - 1;
        });
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [timing]);
  return /*#__PURE__*/_jsx(Form.Item, {
    noStyle: true,
    shouldUpdate: true,
    children: ({
      getFieldValue,
      validateFields
    }) => /*#__PURE__*/_jsxs("div", {
      style: {
        ...(fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style),
        display: 'flex',
        alignItems: 'center'
      },
      ref: ref,
      children: [/*#__PURE__*/_jsx(Input, {
        ...fieldProps,
        style: {
          flex: 1,
          transition: 'width .3s',
          marginRight: 8
        },
        value: value,
        onChange: onChange
      }), /*#__PURE__*/_jsx(Button, {
        style: {
          display: 'block'
        },
        disabled: timing,
        loading: loading,
        ...captchaProps,
        onClick: async () => {
          try {
            if (phoneName) {
              await validateFields([phoneName].flat(1));
              const mobile = getFieldValue([phoneName].flat(1));
              await onGetCaptcha(mobile);
            } else {
              await onGetCaptcha('');
            }
          } catch (error) {
            // eslint-disable-next-line no-console
            console.log(error);
          }
        },
        children: captchaTextRender(timing, count)
      })]
    })
  });
});
ProFormCaptcha.displayName = 'ProFormCaptcha';
export default createField(ProFormCaptcha);