import { fontSizes, lineHeights, fontWeights } from '../global/typography';
import { sizes } from '../global/sizes';
import { borderWidths, radii } from '../global/borders';
import { space } from '../global/space';
import { systemPalette } from '../global/colors';

const checkboxColors = {
  text: systemPalette.text,
  disabledText: systemPalette.disabledText,
  defaultBorder: systemPalette.disabledText,
  checkedBorder: systemPalette.primary,
  defaultBackground: systemPalette.defaultLightBackground,
  checkedBackground: systemPalette.primary,
  disabledBackground: systemPalette.defaultBackground,
  defaultCheckmark: systemPalette.lightText,
  disabledCheckmark: systemPalette.disabledText,
  indeterminateBoxBackground: systemPalette.primary,
  buttonText: systemPalette.text,
  buttonDefaultBorder: systemPalette.defaultBorder,
  buttonHover: systemPalette.activePrimary,
  buttonDisabledText: systemPalette.disabledText,
  buttonDisabledBackground: systemPalette.defaultBackground,
  buttonSelectedText: systemPalette.lightText,
  buttonSelectedBackground: systemPalette.primary,
  buttonDisabledSelectedText: systemPalette.lightText,
  buttonDisabledSelectedBackground: systemPalette.neutralBackground,
};

const checkboxSpace = {
  labelPaddingLeft: `${space.large}px`,
  top: `${(lineHeights.medium - sizes.medium) / 2}px`,
  markTop: `${sizes.medium / 2}px`,
  markLeft: `${sizes.medium / 2}px`,
  marginTop: `${sizes.small}px`,
  marginLeft: `${sizes.large}px`,
  indeterminateBoxTop: `${(lineHeights.medium - sizes.small) / 2}px`,
  indeterminateBoxLeft: `${sizes.small / 2}px`,
  buttonSmallPadding: `${space.xsmall}px ${space.small}px`,
  buttonMediumPadding: `${space.small}px ${space.medium}px`,
  buttonLargePadding: `${space.small}px ${space.medium}px`,
  buttonSmallMargin: `${space.xsmall}px 0 0 ${space.xsmall}px`,
  buttonMediumMargin: `${space.small}px 0 0 ${space.small}px`,
  buttonLargeMargin: `${space.small}px 0 0 ${space.small}px`,
  buttonGroupSmallMargin: `-${space.xsmall}px 0 0 -${space.xsmall}px`,
  buttonGroupMediumMargin: `-${space.small}px 0 0 -${space.small}px`,
  buttonGroupLargeMargin: `-${space.small}px 0 0 -${space.small}px`,
};

const checkboxSizes = {
  height: `${sizes.medium}px`,
  width: `${sizes.medium}px`,
  markHeight: `${sizes.small}px`,
  markWidth: `${sizes.xsmall}px`,
  indeterminateBoxHeight: `${sizes.small}px`,
  indeterminateBoxWidth: `${sizes.small}px`,
  buttonSmall: `${sizes.large}px`,
  buttonMedium: `${sizes.xlarge}px`,
  buttonLarge: `${sizes.xxxlarge}px`,
  buttonGroupSmallWidth: `calc(100% + ${space.xsmall}px)`,
  buttonGroupMediumWidth: `calc(100% + ${space.small}px)`,
  buttonGroupLargeWidth: `calc(100% + ${space.small}px)`,
};

const checkboxBorderWidths = {
  default: `${borderWidths.base}px`,
};

const checkboxRadii = {
  default: `${radii.base}px`,
  indeterminateBox: `${radii.base / 2}px`,
};

const checkboxFontSizes = {
  default: `${fontSizes.medium}px`,
  buttonsmall: `${fontSizes.small}px`,
  buttonMedium: `${fontSizes.medium}px`,
  buttonLarge: `${fontSizes.xlarge}px`,
};

const checkboxLineHeights = {
  default: `${lineHeights.medium}px`,
};

const checkboxFontWeights = {
  default: fontWeights.regular,
};

export {
  checkboxColors,
  checkboxSpace,
  checkboxSizes,
  checkboxBorderWidths,
  checkboxRadii,
  checkboxFontSizes,
  checkboxFontWeights,
  checkboxLineHeights,
};