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

const spinning = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

const IconWrapper = styled.div<{
  themeColor:
    | 'inherit'
    | 'text'
    | 'subdued-text'
    | 'disabled-text'
    | 'primary'
    | 'info'
    | 'danger'
    | 'warning'
    | 'success'
    | 'error';
  themeSize: 'inherit' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
}>`
  display: inline-flex;
  margin: 0;
  padding: 0;

  > * {
    ${({ themeSize, theme }) => {
      switch (themeSize) {
        case 'inherit':
          return css`
            height: ${theme.sizes.icon.inherit};
          `;
        case 'xsmall':
          return css`
            height: ${theme.sizes.icon.xsmall};
          `;
        case 'small':
          return css`
            height: ${theme.sizes.icon.small};
          `;
        case 'medium':
          return css`
            height: ${theme.sizes.icon.medium};
          `;
        case 'large':
          return css`
            height: ${theme.sizes.icon.large};
          `;
        case 'xlarge':
          return css`
            height: ${theme.sizes.icon.xlarge};
          `;
      }
    }};
  }

  ${({ themeColor, theme }) => {
    switch (themeColor) {
      case 'inherit':
        return css`
          color: ${theme.colors.icon.inherit};
        `;
      case 'text':
        return css`
          color: ${theme.colors.icon.text};
        `;
      case 'subdued-text':
        return css`
          color: ${theme.colors.icon.subduedText};
        `;
      case 'disabled-text':
        return css`
          color: ${theme.colors.icon.disabledText};
        `;
      case 'primary':
        return css`
          color: ${theme.colors.icon.primary};
        `;
      case 'info':
        return css`
          color: ${theme.colors.icon.info};
        `;
      case 'danger':
        return css`
          color: ${theme.colors.icon.danger};
        `;
      case 'warning':
        return css`
          color: ${theme.colors.icon.warning};
        `;
      case 'success':
        return css`
          color: ${theme.colors.icon.success};
        `;
      case 'error':
        return css`
          color: ${theme.colors.icon.error};
        `;
    }
  }};
`;

const StyledIcon = styled.i<{
  themeColor:
    | 'inherit'
    | 'text'
    | 'subdued-text'
    | 'disabled-text'
    | 'primary'
    | 'info'
    | 'danger'
    | 'warning'
    | 'success'
    | 'error';
  themeSize: 'inherit' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
}>`
  display: inline-block;
  margin: 0;
  padding: 0;

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'inherit':
        return css`
          font-size: ${theme.fontSizes.icon.inherit};
        `;
      case 'xsmall':
        return css`
          font-size: ${theme.fontSizes.icon.xsmall};
        `;
      case 'small':
        return css`
          font-size: ${theme.fontSizes.icon.small};
        `;
      case 'medium':
        return css`
          font-size: ${theme.fontSizes.icon.medium};
        `;
      case 'large':
        return css`
          font-size: ${theme.fontSizes.icon.large};
        `;
      case 'xlarge':
        return css`
          font-size: ${theme.fontSizes.icon.xlarge};
        `;
    }
  }};

  ${({ themeColor, theme }) => {
    switch (themeColor) {
      case 'inherit':
        return css`
          color: ${theme.colors.icon.inherit};
        `;
      case 'text':
        return css`
          color: ${theme.colors.icon.text};
        `;
      case 'subdued-text':
        return css`
          color: ${theme.colors.icon.subduedText};
        `;
      case 'disabled-text':
        return css`
          color: ${theme.colors.icon.disabledText};
        `;
      case 'primary':
        return css`
          color: ${theme.colors.icon.primary};
        `;
      case 'info':
        return css`
          color: ${theme.colors.icon.info};
        `;
      case 'danger':
        return css`
          color: ${theme.colors.icon.danger};
        `;
      case 'warning':
        return css`
          color: ${theme.colors.icon.warning};
        `;
      case 'success':
        return css`
          color: ${theme.colors.icon.success};
        `;
      case 'error':
        return css`
          color: ${theme.colors.icon.error};
        `;
    }
  }};
`;

const SpinningIconWrapper = styled(IconWrapper)`
  > * {
    animation: ${spinning} 1s infinite linear;
  }
`;

const SpinningIcon = styled(StyledIcon)`
  animation: ${spinning} 1s infinite linear;
`;

export { IconWrapper, StyledIcon, SpinningIconWrapper, SpinningIcon };