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

const radioSizes = {
  height: `${sizes.medium}px`,
  width: `${sizes.medium}px`,
  checkmarkHeight: `${sizes.small}px`,
  checkmarkWidth: `${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 radioColors = {
  primary: systemPalette.primary,
  hoverPrimary: systemPalette.hoverPrimary,
  danger: systemPalette.danger,
  hoverDanger: systemPalette.hoverDanger,
  success: systemPalette.success,
  hoverSuccess: systemPalette.hoverSuccess,
  warning: systemPalette.warning,
  hoverWarning: systemPalette.hoverWarning,
  error: systemPalette.error,
  hoverError: systemPalette.hoverError,
  defaultBorder: systemPalette.defaultBorder,
  disabledBorder: systemPalette.defaultBorder,
  hoverBorder: systemPalette.primary,
  activeBorder: systemPalette.primary,
  defaultText: systemPalette.text,
  hoverText: systemPalette.primary,
  disabledText: systemPalette.disabledText,
  disabledSelectedText: systemPalette.lightText,
  enabledSelectedText: systemPalette.lightText,
  defaultCheckmark: systemPalette.primary,
  disabledCheckmark: systemPalette.neutralDarkBackground,
  disabledBackground: systemPalette.defaultBackground,
  buttonDisabledBackground: systemPalette.defaultBackground,
  buttonCheckedBackground: systemPalette.primary,
  buttonDisabledCheckedBackground: systemPalette.neutralBackground,
};

const radioRadii = {
  default: '50%',
  button: `${radii.base}px`,
};

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

const radioSpace = {
  margin: `0 ${space.small}px 0 0`,
  groupVerticalMargin: `${space.small}px`,
  groupHorizontalMargin: `${space.medium}px`,
  buttonSmallPadding: `${space.xsmall}px ${space.small}px`,
  buttonMediumPadding: `${space.small}px ${space.medium}px`,
  buttonLargePadding: `${space.small}px ${space.medium}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`,
  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`,
};

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

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

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

export {
  radioSizes,
  radioColors,
  radioRadii,
  radioBorderWidths,
  radioSpace,
  radioFontSizes,
  radioLineHeights,
  radioFontWeights,
};