import MidCircleChart from '@composed-components/charts/MidCircleChart';
import Title from '@design-system/Title';
import { Stack, type SxProps } from '@mui/material';

import MidCircleSkeleton from './skeleton';
import { type MidCircleProps } from './types';

const MidCircle = ({
  copetin,
  title,
  description,
  current = 0,
  total = 100,
  decimalPrecision = 0,
  color,
  sx = {},
  slotProps = {},
  loading = false,
}: MidCircleProps) => {
  const progress = (100 * current) / total;
  const value = Math.min(progress, 100);
  const showTitle = copetin || title || description;

  if (loading) {
    return (
      <MidCircleSkeleton
        copetin={copetin}
        title={title}
        description={description}
        {...slotProps.skeleton}
      />
    );
  }

  return (
    <Stack
      className="MidCircle-root"
      {...slotProps.root}
      sx={
        {
          alignItems: 'center',
          gap: 2,
          '& .MidCircleChart-root': {
            maxWidth: '250px',
          },
          ...sx,
          ...slotProps.root?.sx,
        } as SxProps
      }
    >
      <MidCircleChart
        value={value}
        color={color}
        decimalPrecision={decimalPrecision}
        {...slotProps.chart}
      />
      {showTitle && (
        <Title
          variant="M"
          copetin={copetin}
          title={title}
          description={description}
          centered
          {...slotProps.title}
        />
      )}
    </Stack>
  );
};

export default MidCircle;