import Box from '@material-hu/mui/Box';
import CircularProgress, {
  circularProgressClasses,
} from '@material-hu/mui/CircularProgress';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import { SxProps } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

const scaleValue = (value: number, from: number) => {
  const mappedValue = (value - from) / 2;
  return mappedValue / 2;
};

type SemiCircularProgressProps = {
  size: number;
  value: number;
  label: string;
  isLoading?: boolean;
  sx?: SxProps;
  from?: number;
  to?: number;
  hideValue?: boolean;
};

const SemiCircularProgress = ({
  size,
  value,
  label,
  isLoading,
  from = 0,
  hideValue = false,
  ...other
}: SemiCircularProgressProps) => {
  const sizeUnit = 'px';
  const halfSize = `${size / 2 + 7}${sizeUnit}`;

  return (
    <Stack
      sx={{
        position: 'relative',
        display: 'inline-flex',
        width: size,
        height: halfSize,
        overflow: 'hidden',
      }}
    >
      <Box
        sx={{
          position: 'absolute',
          display: 'inline-flex',
          top: 0,
          left: 0,
          transform: 'rotate(-90deg)',
        }}
      >
        <CircularProgress
          size={size}
          value={isLoading || hideValue ? 0 : scaleValue(value, from)}
          variant="determinate"
          {...other}
          sx={{
            [`& .${circularProgressClasses.circle}`]: {
              strokeLinecap: 'round',
            },
            ...other.sx,
          }}
        />
      </Box>
      <Box
        sx={{
          position: 'absolute',
          display: 'inline-flex',
          top: 0,
          left: 0,
          transform: 'rotate(-90deg)',
        }}
      >
        <CircularProgress
          size={size}
          value={50}
          variant="determinate"
          color="secondary"
          role="presentation"
          sx={{
            opacity: 0.15,
            [`& .${circularProgressClasses.circle}`]: {
              strokeLinecap: 'round',
            },
          }}
        />
      </Box>
      <Stack
        sx={{
          top: 24,
          left: 0,
          bottom: 0,
          right: 0,
          position: 'absolute',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {isLoading && (
          <>
            <Skeleton
              width="2rem"
              height="2rem"
            />
            <Skeleton
              width="56px"
              height="13px"
            />
          </>
        )}
        {!isLoading && (
          <>
            <Typography
              variant="h4"
              component="span"
              lineHeight="100%"
            >
              {hideValue ? '--' : value}
            </Typography>
            <Typography
              color="secondary"
              fontSize="small"
              fontWeight="500"
              lineHeight="100%"
            >
              {label}
            </Typography>
          </>
        )}
      </Stack>
    </Stack>
  );
};

export default SemiCircularProgress;