import React from 'react';
import styled from 'styled-components';

import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
import { ProgressBarBaseProps, CustomColor } from '../interfaces';

const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor; $h?: number }>(({ colorCustom, $h }) => ({
  width: '100%',
  height: $h ? `${$h}px` : '10px',
  borderRadius: '10px',
  position: 'relative',
  backgroundColor: colorCustom ? colorCustom.root : undefined,
  [`&.${linearProgressClasses.determinate}`]: {
    backgroundColor: colorCustom ? colorCustom.root : undefined,
  },
  [`& .${linearProgressClasses.bar}`]: {
    backgroundColor: colorCustom ? colorCustom.bar : undefined,
  },
}));

const ProgressBarLabelStyled = styled(Typography)<{ $fSize?: string }>`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
  text-align: left;
  font-size: ${({ $fSize }) => $fSize || '1rem'};
`;

export const ProgressBar = ({
  value = 0,
  label,
  variant = 'determinate',
  total,
  className,
  localeString,
  colorCustom,
  color = 'primary',
  htmlLabel,
  ...props
}: ProgressBarBaseProps) => {
  const percentage = value && total ? (value / total) * 100 : 0;

  return (
    <div className={className} style={{ minWidth: '100px' }}>
      {label ? (
        <ProgressBarLabelStyled $fSize={props.fSize} className="ProgressBarLabel">
          <>
            {label}
            {!props.hideValue && (
              <span style={{ right: 0 }}>
                {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
              </span>
            )}
          </>
        </ProgressBarLabelStyled>
      ) : (
        htmlLabel
      )}

      <ProgressBarStyled
        value={percentage}
        variant={variant}
        colorCustom={colorCustom}
        $h={props.h}
        color={colorCustom ? undefined : color}
        {...props}
      />
    </div>
  );
};