import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { css, useTheme } from 'styled-components';
import { spacing } from '../../spacing';
import { fontSize, fontWeight } from '../../style/theme';
import { getThemePropSelector } from '../../utils';
const Container = styled.div ``;
const ProgressBarContainer = styled.div `
  display: flex;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;

  ${(props) => {
    switch (props.size) {
        case 'smaller':
            return css `
          height: ${fontSize.smaller};
          font-size: ${fontSize.smaller};
        `;
        case 'base':
            return css `
          height: ${fontSize.small};
          font-size: ${fontSize.small};
        `;
        case 'large':
            return css `
          height: ${fontSize.base};
          font-size: ${fontSize.base};
        `;
        case 'larger':
            return css `
          height: 20px;
        `;
        case 'custom':
            return css `
          height: ${props.height};
          font-size: ${props.height};
        `;
        default:
            return css `
          height: ${fontSize.base};
          font-size: ${fontSize.base};
        `;
    }
}};

  background-color: ${(props) => {
    return props.backgroundColor;
}};
  /* Add the border for the progress bar when there is label inside.*/
  ${(props) => {
    if (props.buildinLabel) {
        return css `
        border: 1px solid;
        border-color: ${getThemePropSelector('border')};
      `;
    }
}};
`;
const TopLeftLabel = styled.span `
  display: inline-block;
  font-size: ${fontSize.large};
  font-weight: ${fontWeight.bold};
  color: ${getThemePropSelector('textPrimary')};
`;
const TopRightLabel = styled.span `
  display: inline-block;
  font-size: ${fontSize.small};
  color: ${getThemePropSelector('textPrimary')};
`;
const BottomLabel = styled.span `
  display: inline-block;
  color: ${getThemePropSelector('textSecondary')};
`;
const TopLabelsContainer = styled.div `
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 ${spacing.r4} 0;
`;
const BottomLabelsContainer = styled(TopLabelsContainer) `
  margin: ${spacing.r4} 0 0 0;
  font-size: ${fontSize.smaller};
`;
const FilledAreaContainer = styled.div `
  display: flex;
  justify-content: flex-start;
  border-radius: 4px;
  height: 100%;
  ${(props) => {
    if (props.isAnimation) {
        return css `
      @keyframes widthAnimation {
        from {
          width: 0%;
        }
        to {
          width: ${props.width} + "%";
        }
      }
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-name: widthAnimation;

      background-color: ${props.color || props.theme.selectedActive}
      width: ${props.width}%;
    `;
    }
    else {
        return css `
        background-color: ${props.color || props.theme.selectedActive};
        width: ${props.width}%;
      `;
    }
}}
`;
const BuildinLabel = styled.div `
  color: ${getThemePropSelector('textPrimary')};
  padding-left: 5px;
  white-space: nowrap;
`;
function ProgressBar({ percentage = 50, size = 'base', color, backgroundColor, topLeftLabel, topRightLabel, bottomLeftLabel, bottomRightLabel, buildinLabel, isAnimation = false, height, ...rest }) {
    const theme = useTheme();
    if (!backgroundColor) {
        backgroundColor = theme.backgroundLevel2;
    }
    return (_jsxs(Container, { className: "sc-progressbar", ...rest, children: [(topLeftLabel || topRightLabel) && (_jsxs(TopLabelsContainer, { children: [topLeftLabel && (_jsx(TopLeftLabel, { className: "sc-progressbar-topLeftLabel", children: topLeftLabel })), topRightLabel && (_jsx(TopRightLabel, { className: "sc-progressbar-toprightlabel", children: topRightLabel }))] })), _jsx(ProgressBarContainer, { className: "sc-progressbarcontainer", size: size, buildinLabel: buildinLabel, backgroundColor: backgroundColor, height: height, children: _jsx(FilledAreaContainer, { color: color, width: percentage, isAnimation: isAnimation, children: _jsx(BuildinLabel, { children: buildinLabel }) }) }), (bottomLeftLabel || bottomRightLabel) && (_jsxs(BottomLabelsContainer, { children: [bottomLeftLabel && (_jsx(BottomLabel, { className: "sc-progressbar-bottomleftlabel", children: bottomLeftLabel })), bottomRightLabel && (_jsx(BottomLabel, { className: "sc-progressbar-bottomrightlabel", children: bottomRightLabel }))] }))] }));
}
export { ProgressBar };
