import React, { memo, useEffect, useState } from "react";

const PROGRESS_MAX = 100;
const DEFAULT_PROGRESS_START = 70;

export const getProgressBarColorHexCode = (progress: number) => {
  if (progress >= 90) {
    return "#256FFF";
  } else if (progress >= 80) {
    return "#36B7FF";
  } else if (progress >= 70) {
    return "#00CC6A";
  } else if (progress >= 60) {
    return "#FFBC00";
  } else if (progress >= 1) {
    return "#FF455B";
  } else {
    return "";
  }
};

const RingProgress = ({
  progressEnd = 0,
  size = 45,
  loadingDuration = 1000, // ms
  trackWidth = 10,
  indicatorWidth = 10,
  labelClassName = "",
}: {
  progressStart?: number;
  progressEnd: number;
  size: number;
  loadingDuration?: number;
  trackWidth?: number;
  indicatorWidth?: number;
  labelClassName?: string;
}) => {
  const isServerSide = typeof window === "undefined";

  const roundedProgressEnd = Math.round(progressEnd);
  const [progress, setProgress] = useState(
    isServerSide
      ? roundedProgressEnd
      : roundedProgressEnd >= DEFAULT_PROGRESS_START
      ? DEFAULT_PROGRESS_START
      : roundedProgressEnd
  );

  useEffect(() => {
    const loadingTimeout = setTimeout(() => {
      if (progress >= roundedProgressEnd || progress >= PROGRESS_MAX) {
        return;
      }
      setProgress(progress + 1);
    }, loadingDuration / 100);

    if (progress >= roundedProgressEnd || progress >= PROGRESS_MAX) {
      clearTimeout(loadingTimeout);
    }

    return () => {
      clearTimeout(loadingTimeout);
    };

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [progress]);

  return (
    <ProgressBar
      progress={Math.round(progress)}
      progressColor={getProgressBarColorHexCode(progress)}
      size={size}
      trackWidth={trackWidth}
      indicatorWidth={indicatorWidth}
      labelClassName={labelClassName}
    />
  );
};

export default memo(RingProgress);

const ProgressBar = ({
  progress,
  progressColor = "#256FFF",
  trackWidth = 10,
  size = 100,
  indicatorWidth = 10,
  trackColor = `#EFEFEF`,
  indicatorCap = `round`,
  spinnerMode = false,
  spinnerSpeed = 1,
  labelClassName = "",
}: {
  progress: number;
  progressColor?: string;
  size?: number;
  trackWidth: number;
  indicatorWidth: number;
  trackColor?: string;
  indicatorCap?: "round" | "inherit" | "butt" | "square" | undefined;
  label?: string;
  spinnerMode?: boolean;
  spinnerSpeed?: number;
  labelClassName?: string;
}) => {
  const center = size / 2,
    radius =
      center - (trackWidth > indicatorWidth ? trackWidth : indicatorWidth),
    dashArray = 2 * Math.PI * radius,
    dashOffset = dashArray * ((100 - progress) / 100);

  return (
    <div className="svg-pi-wrapper" style={{ width: size, height: size }}>
      <svg className="svg-pi" style={{ width: size, height: size }}>
        <circle
          className="svg-pi-track"
          cx={center}
          cy={center}
          fill="transparent"
          r={radius}
          stroke={trackColor}
          strokeWidth={trackWidth}
        />
        <circle
          className={`svg-pi-indicator ${
            spinnerMode ? "svg-pi-indicator--spinner" : ""
          }`}
          style={{ animationDuration: `${spinnerSpeed * 1000}` }}
          cx={center}
          cy={center}
          fill="transparent"
          r={radius}
          stroke={progressColor}
          strokeWidth={indicatorWidth}
          strokeDasharray={dashArray}
          strokeDashoffset={dashOffset}
          strokeLinecap={indicatorCap}
        />
      </svg>

      <div className="svg-pi-label" style={{ color: progressColor }}>
        {!spinnerMode && (
          <span className={`svg-pi-label__progress ${labelClassName}`}>{`${
            progress > 100 ? 100 : progress
          }`}</span>
        )}
      </div>
    </div>
  );
};