import styled, { css } from 'styled-components';

const Wrapper = styled.div<{
  themeSize: 'small' | 'medium';
}>`
  box-sizing: border-box;
  color: ${({ theme }) => theme.colors.progress.text};
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-weight: ${({ theme }) => theme.fontWeights.progress.default};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          font-size: ${theme.fontSizes.progress.barSmall};
          line-height: ${theme.lineHeights.progress.barSmall};
          height: ${theme.sizes.progress.barWrapperSmallHeight};
        `;
      case 'medium':
        return css`
          font-size: ${theme.fontSizes.progress.barMedium};
          line-height: ${theme.lineHeights.progress.barMedium};
          height: ${theme.sizes.progress.barWrapperMediumHeight};
        `;
    }
  }};
`;

const Background = styled.div<{
  themeFullWidth: boolean;
  themeSize: 'small' | 'medium';
}>`
  width: calc(100% - ${({ theme }) => theme.sizes.progress.barTextWidth});
  background-color: ${({ theme }) => theme.colors.progress.background};
  border-radius: ${({ theme }) => theme.radii.progress.bar};
  margin: 0;
  padding: 0;

  ${({ themeFullWidth }) => {
    switch (themeFullWidth) {
      case true:
        return css`
          width: 100%;
        `;
      case false:
        return css``;
    }
  }};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          height: ${theme.sizes.progress.barSmallHeight};
        `;
      case 'medium':
        return css`
          height: ${theme.sizes.progress.barMediumHeight};
        `;
    }
  }};
`;

const ProgressPercentage = styled.div<{
  themeIntent: 'primary' | 'danger' | 'success' | 'warning' | 'error';
  themeSize: 'small' | 'medium';
  themeValue: number;
}>`
  transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
  width: ${(props): string => `${props.themeValue}%`};
  border-radius: ${({ theme }) => theme.radii.progress.bar};
  margin: 0;
  padding: 0;

  ${({ themeIntent, theme }) => {
    switch (themeIntent) {
      case 'primary':
        return css`
          background-color: ${theme.colors.progress.primary};
        `;
      case 'success':
        return css`
          background-color: ${theme.colors.progress.success};
        `;
      case 'danger':
        return css`
          background-color: ${theme.colors.progress.danger};
        `;
      case 'warning':
        return css`
          background-color: ${theme.colors.progress.warning};
        `;
      case 'error':
        return css`
          background-color: ${theme.colors.progress.error};
        `;
    }
  }};

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          height: ${theme.sizes.progress.barSmallHeight};
        `;
      case 'medium':
        return css`
          height: ${theme.sizes.progress.barMediumHeight};
        `;
    }
  }};
`;

const Info = styled.div`
  display: flex;
  box-sizing: border-box;
  width: ${({ theme }) => theme.sizes.progress.barTextWidth};
  margin: 0;
  padding: 0;
  padding-left: ${({ theme }) => theme.space.progress.barTextPadding};
`;

export { Wrapper, Background, ProgressPercentage, Info };