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

interface ButtonSizes {
  large: string;
  largeMinWidth: string;
  medium: string;
  mediumMinWidth: string;
  small: string;
  smallMinWidth: string;
}

interface ButtonSpace {
  iconPadding: string;
  largePadding: string;
  mediumPadding: string;
  smallPadding: string;
}

interface ButtonFontSizes {
  large: string;
  medium: string;
  small: string;
}

interface ButtonFontWeights {
  text: number;
}

interface ButtonLineHeighths {
  large: string;
  medium: string;
  small: string;
}

interface ButtonBorderWidths {
  default: string;
}

interface ButtonRadii {
  large: string;
  medium: string;
  small: string;
}

interface ButtonColors {
  activeDanger: string;
  activeError: string;
  activePrimary: string;
  activeSuccess: string;
  activeWarning: string;
  basicTransparent: string;
  danger: string;
  defaultBackground: string;
  defaultBorder: string;
  defaultLightBackground: string;
  defaultText: string;
  disabledBackground: string;
  disabledLightText: string;
  disabledText: string;
  error: string;
  hoverDanger: string;
  hoverError: string;
  hoverPrimary: string;
  hoverSuccess: string;
  hoverWarning: string;
  linkSubdued: string;
  loadingDanger: string;
  loadingError: string;
  loadingPrimary: string;
  loadingSuccess: string;
  loadingWarning: string;
  primary: string;
  success: string;
  warning: string;
}

const buttonSizes: ButtonSizes = {
  small: `${sizes.large}px`,
  medium: `${sizes.xlarge}px`,
  large: `${sizes.xxxlarge}px`,
  smallMinWidth: '50px',
  mediumMinWidth: '80px',
  largeMinWidth: '100px',
};

const buttonSpace: ButtonSpace = {
  smallPadding: `${space.xsmall}px ${space.small}px`,
  mediumPadding: `${space.small}px ${space.medium}px`,
  largePadding: `${space.small}px ${space.medium}px`,
  iconPadding: `${space.small}px`,
};

const buttonFontSizes: ButtonFontSizes = {
  small: `${fontSizes.small}px`,
  medium: `${fontSizes.medium}px`,
  large: `${fontSizes.xlarge}px`,
};

const buttonFontWeights: ButtonFontWeights = {
  text: fontWeights.regular,
};

const buttonLineHeights: ButtonLineHeighths = {
  small: `${lineHeights.small}px`,
  medium: `${lineHeights.medium}px`,
  large: `${lineHeights.xlarge}px`,
};

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

const buttonRadii: ButtonRadii = {
  small: `calc(${buttonSizes.small} / 2)`,
  medium: `calc(${buttonSizes.medium} / 2)`,
  large: `calc(${buttonSizes.large} / 2)`,
};

const buttonColors: ButtonColors = {
  primary: systemPalette.primary,
  hoverPrimary: systemPalette.hoverPrimary,
  activePrimary: systemPalette.activePrimary,
  loadingPrimary: systemPalette.activePrimary,
  danger: systemPalette.danger,
  hoverDanger: systemPalette.hoverDanger,
  activeDanger: systemPalette.activeDanger,
  loadingDanger: systemPalette.activeDanger,
  success: systemPalette.success,
  hoverSuccess: systemPalette.hoverSuccess,
  activeSuccess: systemPalette.activeSuccess,
  loadingSuccess: systemPalette.activeSuccess,
  warning: systemPalette.warning,
  hoverWarning: systemPalette.hoverWarning,
  activeWarning: systemPalette.activeWarning,
  loadingWarning: systemPalette.activeWarning,
  error: systemPalette.error,
  hoverError: systemPalette.hoverError,
  activeError: systemPalette.activeError,
  loadingError: systemPalette.activeError,
  basicTransparent: systemPalette.lightText,
  linkSubdued: systemPalette.subduedText,
  defaultBackground: systemPalette.defaultBackground,
  defaultLightBackground: systemPalette.defaultLightBackground,
  defaultBorder: systemPalette.disabledText,
  defaultText: systemPalette.text,
  disabledText: systemPalette.subduedText,
  disabledLightText: systemPalette.disabledText,
  disabledBackground: systemPalette.neutralLightBackground,
};

export {
  buttonSizes,
  buttonSpace,
  buttonFontSizes,
  buttonFontWeights,
  buttonLineHeights,
  buttonBorderWidths,
  buttonRadii,
  buttonColors,
};