import React, { ReactElement } from 'react';
import css from '../../utils/css';
import Icon from '../Icon';

import { CommonProps } from '../common';
import {
  Background,
  Info,
  ProgressPercentage,
  Wrapper,
} from './StyledProgressBar';

export interface ProgressBarProps extends CommonProps {
  intent: 'primary' | 'danger' | 'success' | 'warning' | 'error';
  size: 'small' | 'medium';
  status: 'active' | 'exception' | 'custom';
  value: number;
  withInfo: boolean;
}

const ProgressBar = ({
  intent,
  size,
  status,
  withInfo,
  value,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: ProgressBarProps): ReactElement => {
  return (
    <Wrapper
      themeSize={size}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      <Background themeSize={size} themeFullWidth={withInfo === false}>
        <ProgressPercentage
          themeSize={size}
          themeIntent={intent}
          themeValue={value}
        />
      </Background>
      {withInfo === true && (
        <Info>
          {status === 'exception' && (
            <Icon icon="circle-cancel" intent={intent} />
          )}
          {status === 'active' && value === 100 && (
            <Icon icon="circle-ok" intent={intent} />
          )}
          {((status === 'active' && value < 100) || status === 'custom') &&
            `${value}%`}
        </Info>
      )}
    </Wrapper>
  );
};

export default ProgressBar;