import styled, { keyframes } from 'styled-components';
import { getFontSize, getSpacing, getColorAlias } from '../../utils/index.js';

const ProgressBarContainer = styled.div `
  ${getFontSize('size16')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-weight: ${(props) => props.theme.font.weightRegular};
  width: 100%;
  border-radius: ${(props) => props.theme.radius.roundedB};
  display: flex;
  flex-direction: column;
  min-width: 250px;
`;
const ProgressBarHeader = styled.div `
  display: flex;
  justify-content: space-between;
  ${getFontSize('size14')};
  margin-bottom: ${getSpacing('s02')};
`;
const LabelText = styled.span `
  font-weight: ${(props) => props.theme.font.weightBold};
  color: ${getColorAlias('contentDefault')};
  align-self: center;
`;
const LabelDetailsText = styled.span `
  color: ${getColorAlias('contentSubdued')};
  align-self: center;
`;
const AssistiveText = styled.span `
  color: ${getColorAlias('contentSubdued')};
  ${getFontSize('size14')};
  margin-top: ${getSpacing('s02')};
`;
const ProgressBarEmpty = styled.div `
  width: 100%;
  background: ${getColorAlias('interactiveSecondary')};
  border-radius: ${(props) => props.theme.radius.roundedB};
  height: 6px;
  overflow: hidden;
`;
const ProgressBarFiller = styled.div `
  background: ${({ color }) => color === 'primary'
    ? getColorAlias('interactivePrimary')
    : getColorAlias('interactiveBrand')};

  width: ${(props) => props.width}%;
  border-radius: ${(props) => props.theme.radius.roundedB};
  height: 6px;
  text-align: center;
  min-width: max-content;
  transition: width ${(props) => props.theme.motion.speed.defaultL};
`;
const IndeterminateBarAnimation = keyframes `
  0% {transform:  translateX(0) scaleX(0);}
  40% {transform:  translateX(0) scaleX(0.4);}
  100% {transform:  translateX(100%) scaleX(0.5);}
`;
const IndeterminateProgressBarFiller = styled.div `
  background: ${({ color }) => color === 'primary'
    ? getColorAlias('interactivePrimary')
    : getColorAlias('interactiveBrand')};

  width: 100%;
  border-radius: ${(props) => props.theme.radius.roundedB};
  height: 6px;
  text-align: center;
  min-width: max-content;
  animation: ${IndeterminateBarAnimation} 1s infinite linear;
  transform-origin: 0% 50%;
`;

export { AssistiveText, IndeterminateProgressBarFiller, LabelDetailsText, LabelText, ProgressBarContainer, ProgressBarEmpty, ProgressBarFiller, ProgressBarHeader };
