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

const switchSizes = {
  smallWidth: `${sizes.xlarge}px`,
  smallHeight: `${sizes.medium}px`,
  sliderSmall: `${sizes.medium - sizes.xsmall}px`,
  mediumWidth: `${sizes.xxxlarge}px`,
  mediumHeight: `${sizes.large}px`,
  sliderMedium: `${sizes.large - sizes.small}px`,
};

const switchColors = {
  background: systemPalette.defaultDarkGreyBackground,
  checkedBackground: systemPalette.primary,
  disabledBackground: systemPalette.defaultDarkGreyBackground,
  checkedDisabledBackground: systemPalette.neutralBackground,
  handleBackgroundColor: systemPalette.defaultLightBackground,
  iconColor: systemPalette.lightText,
  loadingIconColor: systemPalette.defaultBorder,
  disabledLoadingIconColor: systemPalette.neutralBackground,
  checkedLoadingIconColor: systemPalette.primary,
  checkedDisabledLoadingIconColor: systemPalette.primaryBackground,
};

const switchRadii = {
  small: `${sizes.small}px`,
  medium: `${sizes.medium}px`,
};

const switchSpace = {
  sliderSmallTop: `${sizes.xxsmall}px`,
  sliderSmallLeft: `${sizes.xxsmall}px`,
  sliderSmallCheckedLeft: `${sizes.xlarge - sizes.medium + sizes.xsmall / 2}px`,
  sliderMediumTop: `${sizes.xsmall}px`,
  sliderMediumLeft: `${sizes.xsmall}px`,
  sliderMediumCheckedLeft: `${
    sizes.xxxlarge - sizes.large + sizes.small / 2
  }px`,

  iconSmallTop: 0,
  iconSmallLeft: `${sizes.xsmall}px`,
  iconSmallMarginLeft: 0,
  iconMediumTop: `${sizes.xsmall}px`,
  iconMediumLeft: `${sizes.xsmall}px`,
  iconMediumMarginLeft: `${sizes.xxsmall}px`,

  loadingIconSmallTop: 0,
  loadingIconSmallLeft: `${sizes.xxsmall}px`,
  loadingIconSmallCheckedLeft: `${
    sizes.xlarge - sizes.medium + sizes.xxsmall / 2
  }px`,
  loadingIconMediumTop: `${sizes.xsmall}px`,
  loadingIconMediumLeft: `${sizes.xsmall}px`,

  loadingIconMediumCheckedLeft: `${
    sizes.xxxlarge - sizes.large + sizes.small / 2
  }px`,
};

const switchFontSizes = {
  iconSmall: `${fontSizes.small}px`,
  iconMedium: `${fontSizes.large}px`,
  disabledIconSmall: `${fontSizes.small}px`,
  disabledIconMedium: `${fontSizes.large}px`,
  loadingIconSmall: `${fontSizes.xsmall}px`,
  loadingIconMedium: `${fontSizes.medium}px`,
};

export { switchSizes, switchSpace, switchColors, switchRadii, switchFontSizes };