import * as ProgressPrimitive from "@radix-ui/react-progress";
import { forwardRef, useEffect, useState } from "react";

import { cn } from "@/lib/utils";
import { mostrarArmazenamentoAws } from "@/requests/common/Aws/listarArmazenamento";
import { useAuth } from "@/src/contexts/authContext";

const Progress = forwardRef(({ className, value, ...props }: any, ref) => {
  const [totalAmazon, setTotalAmazon] = useState(0);
  const [usadoAmazon, setUsadoAmazon] = useState(0);

  const { valuesSession } = useAuth();
  const { session } = valuesSession();

  useEffect(() => {
    mostrarArmazenamentoAws(session.id_empresa_usuario).then((e: any) => {
      setTotalAmazon(e.totalStorageGB);
      setUsadoAmazon(e.totalSize);
    });
  }, []);

  const percentUsed = (usadoAmazon / totalAmazon) * 100 || 0;

  return (
    <>
      <ProgressPrimitive.Root
        ref={ref}
        className={cn(
          "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
          className
        )}
        {...props}
      >
        <ProgressPrimitive.Indicator
          className="h-full w-full flex-1 bg-primary transition-all"
          style={{
            transform: `translateX(-${100 - percentUsed || 0}%)`,
          }}
        />
        {/* <div className="absolute inset-0 flex items-center justify-center text-white select-none">
          {percentUsed}%
        </div> */}
      </ProgressPrimitive.Root>
      {/* <div className="w-full flex flex-row justify-between max-sm:text-sm text-black-2 dark:text-stroke">
        <span>{usadoAmazon} Gb</span>
        <span>{totalAmazon} Gb</span>
      </div> */}
    </>
  );
});

Progress.displayName = ProgressPrimitive.Root.displayName;

export { Progress };