import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useContext, useEffect, useImperativeHandle, useMemo } from 'react';
import cls from 'clsx';
import { noop } from '../utils';
import useCountDown from '../hooks/use-count-down';
import { parseFormat } from './utils';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
const CountDown = forwardRef((props, ref) => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('count-down', prefixCls);
  const {
    start,
    pause,
    reset,
    current
  } = useCountDown({
    time: +props.time,
    millisecond: props.millisecond,
    onChange: props.onChange,
    onFinish: props.onFinish
  });
  const timeText = useMemo(() => parseFormat(props.format, current), [current]);

  const resetTime = () => {
    reset(+props.time);

    if (props.autoStart) {
      start();
    }
  };

  useEffect(() => {
    resetTime();
    return () => {
      pause();
    };
  }, [props.time]);
  useImperativeHandle(ref, () => ({
    start,
    pause,
    reset: resetTime
  }));
  return _jsx("div", Object.assign({
    className: cls(props.className, bem()),
    style: props.style
  }, {
    children: props.children ? props.children(current) : timeText
  }));
});
CountDown.defaultProps = {
  autoStart: true,
  time: 0,
  format: 'HH:mm:ss',
  onChange: noop,
  onFinish: noop
};
export default CountDown;