text: import React, { useEffect, useState } from 'react';
  import moment from 'moment';
  import timeEnd from '../../utils/define';
  
  function CircleTimer(props) {
    const [days, setDays] = useState(undefined);
    const [hours, setHours] = useState(undefined);
    const [minutes, setMinutes] = useState(undefined);
    const [seconds, setSeconds] = useState(undefined);
    //=================================================
    const daysRadius = mapNumber(days, 30, 0, 0, 360);
    const hoursRadius = mapNumber(hours, 24, 0, 0, 360);
    const minutesRadius = mapNumber(minutes, 60, 0, 0, 360);
    const secondsRadius = mapNumber(seconds, 60, 0, 0, 360);
    const SVGCircle = ({ radius }) => (
      <svg className="countdown-svg">
        <path fill="none" stroke="#333" strokeWidth="4" d={describeArc(50, 50, 48, 0, radius)} />
      </svg>
    );
    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
      var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
  
      return {
        x: centerX + radius * Math.cos(angleInRadians),
        y: centerY + radius * Math.sin(angleInRadians),
      };
    }
  
    function describeArc(x, y, radius, startAngle, endAngle) {
      var start = polarToCartesian(x, y, radius, endAngle);
      var end = polarToCartesian(x, y, radius, startAngle);
  
      var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
  
      var d = ['M', start.x, start.y, 'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y].join(' ');
  
      return d;
    }
    function mapNumber(number, in_min, in_max, out_min, out_max) {
      return ((number - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
    }
    useEffect(() => {
      const diffTime = moment(timeEnd, 'DD-MM-YYYY HH:mm:ss').unix() - moment().unix();
      var duration = moment.duration(diffTime * 1000, 'milliseconds');
      var interval = 1000;
      var inter = setInterval(function () {
        duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');
        setDays(moment.duration(duration).days());
        setHours(moment.duration(duration).hours());
        setMinutes(moment.duration(duration).minutes());
        setSeconds(moment.duration(duration).seconds());
      }, interval);
      return () => clearInterval(inter);
    }, []);
    return (
      <div>
        <div className="countdown-wrapper">
          <div className="countdown-item">
            <SVGCircle radius={daysRadius} />
            {days}
            <span>Ngày</span>
          </div>
          <div className="countdown-item">
            <SVGCircle radius={hoursRadius} />
            {hours}
            <span>Giờ</span>
          </div>
          <div className="countdown-item">
            <SVGCircle radius={minutesRadius} />
            {minutes}
            <span>Phút</span>
          </div>
          <div className="countdown-item">
            <SVGCircle radius={secondsRadius} />
            {seconds}
            <span>Giây</span>
          </div>
        </div>
      </div>
    );
  }
  
  export default CircleTimer;
  