"use client";

import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { cn } from "@/lib/utils";
import { useMemo } from "react";
import { CircularProgressbar as CircularProgressbarComponent } from "react-circular-progressbar";

export interface CircularProgressbarProps extends React.ComponentProps<"div"> {
  pathColor?: string;
  trailColor?: string;
  strokeWidth?: number;
  value?: number;
  maxValue?: number;
  minValue?: number;
  transitionDuration?: string;
  transitionDelay?: string;
  text?: TypographyProps<"span">;
  isShowText?: boolean;
  size?: number;
}

export default function CircularProgressbar({
  pathColor = "var(--primary)",
  trailColor = "var(--chart-secondary)",
  strokeWidth = 13,
  value = 50,
  maxValue = 100,
  minValue = 0,
  transitionDuration = "0.5s",
  transitionDelay = "0s",
  text,
  children,
  isShowText = true,
  size = 60,
  ...props
}: CircularProgressbarProps) {
  const textValue = useMemo(() => {
    return `${value.toFixed(0)}%`;
  }, [value]);

  return (
    <div
      {...props}
      className={cn(`relative`, props.className)}
      style={{ width: size, height: size, ...props.style }}
    >
      <CircularProgressbarComponent
        styles={{
          path: {
            stroke: pathColor,
            strokeLinecap: "round",
            transitionDuration: transitionDuration,
            transitionDelay: transitionDelay,
          },
          trail: {
            stroke: trailColor,
          },
        }}
        // className="path:stroke-primary trail:stroke-muted"
        maxValue={maxValue}
        minValue={minValue}
        strokeWidth={strokeWidth}
        value={value}
      />
      {(text || isShowText) && (
        <Typography
          as="span"
          size="sm"
          weight="semiBold"
          color="muted"
          {...text}
          className={cn(
            text?.className,
            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
            children && "hidden"
          )}
        >
          {text?.children || textValue}
        </Typography>
      )}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        {children}
      </div>
    </div>
  );
}
