import styled, { css } from 'styled-components';
import { transparentizeAliasColor, getColorAlias } from '../../utils/index.js';
import { spin } from '../../utils/styles.js';

function getSpinnerVariant(variant) {
    switch (variant) {
        case 'inverse':
            return css `
        border-color: ${transparentizeAliasColor(0.35, 'contentInverse')};
        border-top-color: ${getColorAlias('contentInverse')};
      `;
        case 'secondary':
            return css `
        border-color: ${transparentizeAliasColor(0.35, 'contentInteractiveSecondary')};
        border-top-color: ${getColorAlias('contentInteractiveSecondary')};
      `;
        case 'brand':
        default:
            return css `
        border-color: ${transparentizeAliasColor(0.35, 'contentBrand')};
        border-top-color: ${getColorAlias('contentBrand')};
      `;
    }
}
function getSpinnerSize(size) {
    switch (size) {
        case 'XS':
            return { borderSize: 2, width: 16 };
        case 'S':
            return { borderSize: 2.5, width: 20 };
        case 'L':
            return { borderSize: 4, width: 32 };
        case 'XL':
            return { borderSize: 6, width: 48 };
        case 'M':
        default:
            return { borderSize: 3, width: 24 };
    }
}
const Loader = styled.div `
  animation: ${spin} 0.8s infinite linear;
  border-radius: ${(props) => props.theme.radius.roundedE};
  ${(props) => {
    const { borderSize, width } = getSpinnerSize(props.size);
    return css `
      border: ${borderSize}px solid;
      width: ${width}px;
      height: ${width}px;
      ${getSpinnerVariant(props.variant)}
    `;
}};
`;

export { Loader };
