import { memo } from 'react';

import MuiGrid from '@mui/material/Grid';
import MuiLinearProgress from '@mui/material/LinearProgress';
import { styled } from '@mui/material/styles';

import type { Theme } from '../@styles/theme-provider';

const StyledTextContainer = styled('div')(({ theme }: { theme: Theme }) => ({
  display: 'flex',
  flexWrap: 'wrap',
  marginBottom: theme.spacing(0.5),
  '& .current': {
    ...theme.typography.caption2,
    color: theme.palette.primary[500]
  },
  '& .total': {
    ...theme.typography.caption1,
    color: theme.palette.primary[400]
  }
}));

const StyledProgress = styled(MuiLinearProgress)(({ theme }: { theme: Theme }) => ({
  borderRadius: theme.spacing(1 / 8),
  height: theme.spacing(3 / 8),
  width: theme.spacing(7.5),
  '& .MuiLinearProgress-bar1Determinate': {
    backgroundColor: theme.palette.secondary[500],
    borderRadius: theme.spacing(1.5 / 8)
  }
}));

export interface TableProgressbarProps {
  /**
   * The current value.
   */
  current: number;
  /**
   * The total value.
   */
  total: number;
  /**
   * Custom class name in case you need to add custom styles to the component.
   */
  className?: string;
}

const TableProgressbar = (props: TableProgressbarProps) => {
  const { current, total, className } = props;
  const value = (current / total) * 100;

  return (
    <MuiGrid container direction="column" data-testid="tableProgressbarRoot" className={className}>
      <StyledTextContainer>
        <span className="current">{current}&nbsp;</span>
        <span className="total">/&nbsp;{total}</span>
      </StyledTextContainer>
      <StyledProgress variant="determinate" value={value} />
    </MuiGrid>
  );
};

const m = memo(TableProgressbar);
export { m as TableProgressbar };