/** @format */

import React, { useEffect, useRef, useState } from 'react';

interface NumberProps {
  data: any;
  style: any;
  action: boolean;
  requestKey: string;
  time: number;
}

const NumberBox = (props: NumberProps) => {
  const { data, style, action, time = 1000, requestKey } = props;
  const [number, setNumber] = useState<any>();
  const count = useRef(null);

  useEffect(() => {
    setNumber(data);
    count.current = 0;
  }, [data, action, time, requestKey]);

  useEffect(() => {
    const timer = setInterval(function() {
      if (!action) {
        return;
      }
      count.current += 1;
      if (count.current > time / 50) {
        setNumber(data);
        clearInterval(timer);
        return;
      }
      if (number === ',') {
        setNumber(',');
        clearInterval(timer);
      } else if (number === '.') {
        setNumber('.');
        clearInterval(timer);
      } else {
        const n = Number(number);
        setNumber(n + 1 > 9 ? 0 : n + 1);
      }
    }, 50);
    return () => {
      clearInterval(timer);
    };
  }, [number, action, time, requestKey]);

  return (
    <>
      <span style={style}>{number}</span>
    </>
  );
};

export default NumberBox;