import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { StyledProgressBar, StyledProgressLine } from './styled-components';
import { StyledDivCounter } from '../StyledComponents';
import { useTheme } from '../Theme';
import { ProgressBarProps } from './types.d';

/**
 *
 * @param percent - percent from 0 to 100
 * @param customColor - any string color
 * @param color - "white" | "lightGreen" | "gray" | "gray20" | "orange" | "purple" | "yellow" | "pink" | "green" | "blue"
 * @param textPosition - top | right
 * @param showText - boolean
 * @returns
 */

export const ProgressBar: FunctionComponent<ProgressBarProps> = ({
  className = '',
  percent,
  showText = true,
  textPosition = 'top',
  color = 'lightGreen',
  customColor,
  secondColor,
}) => {
  const theme = useTheme();
  const classNames = cn({
    'square-progress': true,
    [className]: true,
    [textPosition]: true,
  });

  if (percent === undefined || percent === null) return null;
  const getPercent = () => {
    if (percent < 0) return 0;
    if (percent > 100) return 100;
    return percent;
  };

  const renderText = () => {
    if (!showText) return null;
    return (
      <StyledDivCounter className="square-progress-percent" $theme={theme}>
        {getPercent()}%
      </StyledDivCounter>
    );
  };

  return (
    <div className={classNames}>
      {renderText()}
      <StyledProgressLine className="square-progress-line" $theme={theme} $color={secondColor}>
        <StyledProgressBar
          $color={color}
          $customColor={customColor}
          $theme={theme}
          className="square-progress-bar"
          style={{ width: `${getPercent()}%` }}
        />
      </StyledProgressLine>
    </div>
  );
};
