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

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

const SpinnerWrapper = styled.div<{
  themeSize: 'small' | 'medium' | 'large';
}>`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;

  color: ${({ theme }) => theme.colors.spinner.default};

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

const ContentWrapper = styled.div<{ themeLoading: boolean }>`
  position: relative;
  margin: 0;
  padding: 0;

  ${({ themeLoading }) => {
    switch (themeLoading) {
      case true:
        return css`
          opacity: 0.3;
          pointer-events: none;
        `;
      case false:
        return css`
          opacity: 1;
          pointer-events: auto;
        `;
    }
  }};
`;

const SpinnerContainer = styled.div<{
  themeSize: 'small' | 'medium' | 'large';
}>`
  position: relative;
  margin: 0;
  padding: 0;

  & > ${SpinnerWrapper} {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          min-height: ${theme.sizes.spinner.smallContainer};
        `;
      case 'medium':
        return css`
          min-height: ${theme.sizes.spinner.mediumContainer};
        `;
      case 'large':
        return css`
          min-height: ${theme.sizes.spinner.largeContainer};
        `;
    }
  }};
`;

const StyledSpinner = styled.div<{
  themeSize: 'small' | 'medium' | 'large';
}>`
  animation: ${spinning} 1s infinite linear;
  background: transparent;
  border-radius: 50%;
  padding: 0;

  ${({ themeSize, theme }) => {
    switch (themeSize) {
      case 'small':
        return css`
          height: ${theme.sizes.spinner.small};
          width: ${theme.sizes.spinner.small};
          box-shadow: ${theme.shadows.spinner.small};
          margin: ${theme.space.spinner.smallMargin};
        `;
      case 'medium':
        return css`
          height: ${theme.sizes.spinner.medium};
          width: ${theme.sizes.spinner.medium};
          box-shadow: ${theme.shadows.spinner.medium};
          margin: ${theme.space.spinner.mediumMargin};
        `;
      case 'large':
        return css`
          height: ${theme.sizes.spinner.large};
          width: ${theme.sizes.spinner.large};
          box-shadow: ${theme.shadows.spinner.large};
          margin: ${theme.space.spinner.largeMargin};
        `;
    }
  }};
`;

export { SpinnerWrapper, ContentWrapper, SpinnerContainer, StyledSpinner };