import React from "react";
import cn from "classnames";
import PropTypes from "prop-types";

export interface IProgressBarProps {
  className?: string;
  isStriped?: boolean;
  color?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  value: number | undefined;
  valueMin?: number;
  valueMax?: number;
  isAnimated?: boolean;
  children?: React.ReactNode | React.ReactNode[];
  ["data-testid"]?: string;
}

const ProgressBar: React.FC<IProgressBarProps> = props => {
  const {
    className,
    valueMin = 0,
    valueMax = 100,
    value = 0,
    children,
    color,
    isAnimated,
    isStriped
  } = props;
  const testId = props["data-testid"] || "honeyui-progressbar";

  return (
    <div
      style={{ width: `${value}%` }}
      data-testid={testId}
      className={cn(
        "progress-bar",
        {
          [`bg-${color}`]: color,
          "progress-bar-striped": isStriped,
          "progress-bar-animated": isAnimated
        },
        className
      )}
      role="progressbar"
      aria-valuenow={value}
      aria-valuemin={valueMin}
      aria-valuemax={valueMax}
    >
      {children}
    </div>
  );
};

ProgressBar.displayName = "ProgressBar";

ProgressBar.propTypes = {
  className: PropTypes.string,
  isStriped: PropTypes.bool,
  isAnimated: PropTypes.bool,
  color: PropTypes.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "info",
    "light",
    "dark"
  ]),
  value: PropTypes.number,
  valueMin: PropTypes.number,
  valueMax: PropTypes.number,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};

export default ProgressBar;