import {
  LinearProgress,
  linearProgressClasses,
  Stack,
  Typography,
} from '@mui/material';

import Title from '../../Title';

import { type ProgressBarProps } from './types';

const ProgressBar = ({
  title = '',
  description = '',
  helper = '',
  variant = 'indeterminate',
  current = 0,
  total = 100,
  hasPercentage = false,
  withEllipsis = false,
  progressHeight = 4,
  decimalPrecision = 0,
  sx,
}: ProgressBarProps) => {
  const progress = (100 * current) / total;
  return (
    <Stack sx={{ gap: 0.5, ...sx }}>
      {(title || description) && (
        <Title
          variant="S"
          title={title}
          description={description}
          withEllipsis={withEllipsis}
          overflow="tooltip"
        />
      )}
      <Stack sx={{ flexDirection: 'row', alignItems: 'center' }}>
        <LinearProgress
          sx={{
            backgroundColor: theme => theme.palette.new.border.neutral.divider,
            [`& .${linearProgressClasses.bar}`]: {
              backgroundColor: theme => theme.palette.newBase?.brand[500],
            },
            width: '100%',
            borderRadius: 1,
            my: 1,
            height: progressHeight,
          }}
          variant={variant}
          value={Math.min(progress, 100)}
        />
        {hasPercentage && (
          <Typography
            variant="globalXS"
            sx={{
              color: theme => theme.palette.new.text.neutral.lighter,
              ml: 0.5,
            }}
          >
            {`${Number(progress).toFixed(decimalPrecision)}%`}
          </Typography>
        )}
      </Stack>
      {helper && typeof helper === 'string' && (
        <Typography
          variant="globalXXS"
          sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
        >
          {helper}
        </Typography>
      )}
      {helper && typeof helper !== 'string' && helper}
    </Stack>
  );
};

export type { ProgressBarProps };

export default ProgressBar;