import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { StyledContainer, StyledBar } from './styled';
import Semicircular from './semicircular';
function getNormalizedValue(value, max, min) {
    return Math.min(max, Math.max(min, value));
}
/**
 * ProgressBar component communicates to the user the progress of a particular process.
 */
const ProgressBar = props => {
    const { style, variant, shape = 'linear', value = 0, min = 0, max = 100 } = props;
    const normalizedValue = useMemo(() => getNormalizedValue(value, max, min), [max, min, value]);
    if (shape === 'semicircular') {
        return (<Semicircular style={style} variant={variant} value={normalizedValue} max={max} min={min}/>);
    }
    return (<StyledContainer style={style}>
            <StyledBar value={normalizedValue} max={max} variant={variant}/>
        </StyledContainer>);
};
ProgressBar.propTypes = {
    /** An object with custom style applied to the outer element.
     * default value is undefined
     */
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    /** Variant defines the colors of the progress it could be one of 'brand' | 'success' | 'warning' | 'error'
     * default value is brand
     */
    variant: PropTypes.oneOf(['brand', 'success', 'warning', 'error']),
    /** Defines the shape of the progress. */
    shape: PropTypes.oneOf(['linear', 'semicircular']),
    /**The percentage value of the progress. It must be between 0 and 100.
     * default 0
     */
    value: PropTypes.number,
    min: PropTypes.number,
    max: PropTypes.number,
};
ProgressBar.defaultProps = {
    style: undefined,
    variant: 'brand',
    shape: 'linear',
    value: 0,
    min: 0,
    max: 100,
};
export default ProgressBar;
