import React from "react";
import styled from "styled-components";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const SIZE = 150;
const STROKE_WIDTH = 13;
const CENTER = SIZE / 2;
const RADIUS = CENTER - STROKE_WIDTH / 2;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
const ProgressBar = styled.svg`
  transform: rotate(360deg);
`;
const BackgroundCircle = styled.circle`
  fill: none;
  stroke: #f5f7f7;
  stroke-width: ${STROKE_WIDTH}px;
  stroke-linecap: round;
`;
const ProgressCircle = styled.circle`
  fill: none;
  stroke-width: ${STROKE_WIDTH}px;
  stroke-linecap: round; // This will give the rounded ends
  stroke-dasharray: ${(props) => props.dasharray || CIRCUMFERENCE};
  stroke-dashoffset: ${(props) => props.offset};
  transition: stroke-dashoffset 0.3s;

  &[data-color="blue"] {
    stroke: #1abcfe;
  }

  &[data-color="yellow"] {
    stroke: #febf10;
  }

  &[data-color="purple"] {
    stroke: #a259ff;
  }
`;
const ValueText = styled.text`
  font-size: 14px;
  text-anchor: middle;
  dominant-baseline: middle;
`;
const CircularProgressBar = ({ value = 2.5, total = 5 }) => {
  const { findText } = useTranslation(wordStore);
  const progress = (value / total) * 100;
  const offset = CIRCUMFERENCE - (progress / 100) * CIRCUMFERENCE;
  const segmentLength = CIRCUMFERENCE / 4 - 20; // adjust this to change the length of segments
  const gap = 20; // adjust this to change the gap length

  return (
    <ProgressBar width={SIZE} height={SIZE}>
      <BackgroundCircle cx={CENTER} cy={CENTER} r={RADIUS} />
      <ProgressCircle
        cx={CENTER}
        cy={CENTER}
        r={RADIUS}
        offset={offset * 1}
        data-color={findText("blue")}
      />
      <ProgressCircle
        cx={CENTER}
        cy={CENTER}
        r={RADIUS}
        offset={offset * 0.25}
        data-color={findText("yellow")}
      />
      <ProgressCircle
        cx={CENTER}
        cy={CENTER}
        r={RADIUS}
        offset={offset * 0.5}
        data-color={findText("blue")}
      />
      <ProgressCircle
        cx={CENTER}
        cy={CENTER}
        r={RADIUS}
        offset={offset * 1.35}
        data-color={findText("purple")}
      />
      <ValueText x={CENTER} y={CENTER}>
        {findText("{value}GB / {total}GB", {
          value: value,
          total: total,
        })}
      </ValueText>
    </ProgressBar>
  );
};
export default CircularProgressBar;
