/** @format */

import * as d3 from 'd3';
import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';
interface ActionRingChartProps {
  size?: Record<string, any>;
  [key: string]: any;
}

const Number = (props: ActionRingChartProps) => {
  const {
    number = 10,
    animationInterval,
    total,
    showTrueVlaue,
    numberStyle,
  } = props;
  const [count, setCount] = useState(0);
  const counterRef = useRef(count);
  counterRef.current = count;

  useEffect(() => {
    if (total) {
      if (showTrueVlaue) {
        setCount(number);
        return;
      }
      setCount(Math.round((number / total) * 100));
    }
  }, [total]);

  useEffect(() => {
    const newNumber = showTrueVlaue
      ? number
      : Math.round((number / total) * 100);
    const interCount = Math.abs(newNumber - counterRef.current);

    const timer = setInterval(function() {
      if (newNumber > counterRef.current) {
        if (newNumber === counterRef.current) {
          clearInterval(timer);
          return;
        }
        setCount(counterRef.current + 1);
      }
      if (newNumber < counterRef.current) {
        if (newNumber === counterRef.current) {
          clearInterval(timer);
          return;
        }
        setCount(counterRef.current - 1);
      }
    }, (animationInterval / interCount) * 0.7);
    return () => {
      clearInterval(timer);
    };
  }, [number, total]);

  return <div style={numberStyle}>{count}</div>;
};

export default Number;