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

interface SelectButtonSizes {
  groupLargeWidth: string;
  groupMediumWidth: string;
  groupSmallWidth: string;
  large: string;
  medium: string;
  small: string;
}

interface SelectButtonSpace {
  groupLargeMargin: string;
  groupMediumMargin: string;
  groupSmallMargin: string;
  largeMargin: string;
  largePadding: string;
  mediumMargin: string;
  mediumPadding: string;
  smallMargin: string;
  smallPadding: string;
}

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

interface SelectButtonFontWeights {
  default: number;
}

interface SelectButtonBorderWidths {
  default: string;
}

interface SelectButtonRadii {
  default: string;
}

interface SelectButtonColors {
  background: string;
  defaultBorder: string;
  defaultText: string;
  disabledBackground: string;
  disabledSelectedBackground: string;
  disabledSelectedText: string;
  disabledText: string;
  hover: string;
  selectedBackground: string;
  selectedText: string;
}

const selectButtonSizes: SelectButtonSizes = {
  small: `${sizes.large}px`,
  medium: `${sizes.xlarge}px`,
  large: `${sizes.xxxlarge}px`,
  groupSmallWidth: `calc(100% + ${space.xsmall}px)`,
  groupMediumWidth: `calc(100% + ${space.small}px)`,
  groupLargeWidth: `calc(100% + ${space.small}px)`,
};

const selectButtonSpace: SelectButtonSpace = {
  smallPadding: `${space.xsmall}px ${space.small}px`,
  mediumPadding: `${space.small}px ${space.medium}px`,
  largePadding: `${space.small}px ${space.medium}px`,
  groupSmallMargin: `-${space.xsmall}px 0 0 -${space.xsmall}px`,
  groupMediumMargin: `-${space.small}px 0 0 -${space.small}px`,
  groupLargeMargin: `-${space.small}px 0 0 -${space.small}px`,
  smallMargin: `${space.xsmall}px 0 0 ${space.xsmall}px`,
  mediumMargin: `${space.small}px 0 0 ${space.small}px`,
  largeMargin: `${space.small}px 0 0 ${space.small}px`,
};

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

const selectButtonFontWeights: SelectButtonFontWeights = {
  default: fontWeights.regular,
};

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

const selectButtonRadii: SelectButtonRadii = {
  default: `${radii.base}px`,
};

const selectButtonColors: SelectButtonColors = {
  background: systemPalette.defaultLightBackground,
  selectedBackground: systemPalette.primary,
  hover: systemPalette.activePrimary,
  defaultBorder: systemPalette.defaultBorder,
  defaultText: systemPalette.text,
  disabledText: systemPalette.disabledText,
  disabledSelectedText: systemPalette.lightText,
  disabledBackground: systemPalette.defaultBackground,
  disabledSelectedBackground: systemPalette.neutralBackground,
  selectedText: systemPalette.lightText,
};

export {
  selectButtonSizes,
  selectButtonSpace,
  selectButtonFontSizes,
  selectButtonFontWeights,
  selectButtonBorderWidths,
  selectButtonRadii,
  selectButtonColors,
};