import { sizes } from '../global/sizes';
import { fontSizes } from '../global/typography';
import { space } from '../global/space';
import { systemPalette } from '../global/colors';

const spinnerSizes = {
  small: `${sizes.small}px`,
  medium: `${sizes.medium}px`,
  large: `${sizes.large}px`,
  smallContainer: `${sizes.small + space.medium * 2}px`,
  mediumContainer: `${sizes.medium + space.xlarge * 2}px`,
  largeContainer: `${sizes.large + space.xxxxlarge * 2}px`,
};

const spinnerColors = {
  default: systemPalette.primary,
};

const spinnerSpace = {
  smallMargin: `${space.medium}px auto`,
  mediumMargin: `${space.xlarge}px auto`,
  largeMargin: `${space.xxxxlarge}px auto`,
};

const spinnerShadows = {
  small: `${sizes.small}px 0 0 ${systemPalette.primary},
    0 ${sizes.small}px 0 ${systemPalette.primary},
    -${sizes.small}px 0 ${systemPalette.primary}50,
    0 -${sizes.small}px 0 ${systemPalette.primary}80`,

  medium: `${sizes.medium}px 0 0 ${systemPalette.primary},
    0 ${sizes.medium}px 0 ${systemPalette.primary},
    -${sizes.medium}px 0 0 ${systemPalette.primary}50,
    0 -${sizes.medium}px 0 ${systemPalette.primary}80`,

  large: `${sizes.large}px 0 0 ${systemPalette.primary},
    0 ${sizes.large}px 0 ${systemPalette.primary},
    -${sizes.large}px 0 0 ${systemPalette.primary}50,
    0 -${sizes.large}px 0 ${systemPalette.primary}80`,
};

const spinnerFontSizes = {
  small: `${fontSizes.small}px`,
  medium: `${fontSizes.medium}px`,
  large: `${fontSizes.large}px`,
};

export {
  spinnerSizes,
  spinnerShadows,
  spinnerFontSizes,
  spinnerColors,
  spinnerSpace,
};