import { 
  Box, 
  CircularProgress, 
  SxProps, 
  Theme, 
  useTheme 
} from "@mui/material";
import React, { ReactElement } from "react";

interface Props {
  size?: number | string;
  progress?: number;
  // color?: OverridableStringUnion<
  //     'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit',
  //     CircularProgressPropsColorOverrides
  //   >;
  color?: string;
  sx?: SxProps<Theme>,
  icon: ReactElement,
}

export default function CircleGraphIcon(props: Props) {

  const { progress, icon } = props;
  const theme = useTheme()
  const size = props.size ? props.size : theme.spacing(5)
  const exists = props.color ? props.color in theme.palette : false
  
  const color = exists && props.color ? (theme.palette as any)[props.color].main : props.color

  return (
    <Box
      sx={{
        position: 'relative',
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: size,
        height: size,
        marginBottom: theme.spacing(-1),
        ...props.sx,
      }}
    >
      {/* Circular Graph */}
      <CircularProgress
        variant="determinate"
        value={progress}
        // color={color}
        thickness={4}
        style={{
          width: size,
          height: size,
          position: 'absolute',
        }}
        sx={{ color: {color} }}
      />

      {/* Icon at the center */}
      <Box
        sx={{
          position: 'absolute',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          color: {color}
        }}
      >
        {/* CLone element to apply color and size */}
        {icon &&
        React.cloneElement(icon, {
          // color: {color},
          sx: {
            width: `calc(${size} - 14px)`,
            height: `calc(${size} - 14px)`,
            color: {color},
          },
        })}
      </Box>
    </Box>
  )
}