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

interface TagSpace {
  closeBtnPadding: string;
  largePadding: string;
  mediumPadding: string;
  smallPadding: string;
}

interface TagColors {
  activeDangerCloseBtn: string;
  activeErrorCloseBtn: string;
  activePrimaryCloseBtn: string;
  activeSuccessCloseBtn: string;
  activeWarningCloseBtn: string;
  archived: string;
  archivedBackground: string;
  basicCloseBtn: string;
  closeBtn: string;
  danger: string;
  dangerBackground: string;
  defaultBackground: string;
  defaultBorder: string;
  defaultText: string;
  error: string;
  errorBackground: string;
  hoverBasicCloseBtn: string;
  hoverDangerCloseBtn: string;
  hoverErrorCloseBtn: string;
  hoverPrimaryCloseBtn: string;
  hoverSuccessCloseBtn: string;
  hoverWarningCloseBtn: string;
  primary: string;
  primaryBackground: string;
  success: string;
  successBackground: string;
  warning: string;
  warningBackground: string;
}

interface TagBorderWidths {
  default: string;
}

interface TagRadii {
  default: string;
}

interface TagFontSizes {
  closeBtn: string;
  large: string;
  medium: string;
  small: string;
}

interface TagFontWeights {
  default: number;
}

const tagSpace: TagSpace = {
  smallPadding: `${space.xxsmall}px ${space.small}px`,
  mediumPadding: `${space.xsmall}px ${space.small}px`,
  largePadding: `${space.xsmall}px ${space.small}px`,
  closeBtnPadding: `0 0 0 ${space.small}px`,
};

const tagColors: TagColors = {
  defaultText: systemPalette.text,
  defaultBorder: systemPalette.neutralDarkBackground,
  defaultBackground: systemPalette.defaultBackground,
  primary: systemPalette.primary,
  primaryBackground: systemPalette.infoBackground,
  warning: systemPalette.warning,
  warningBackground: systemPalette.warningBackground,
  danger: systemPalette.danger,
  dangerBackground: systemPalette.dangerBackground,
  success: systemPalette.success,
  successBackground: systemPalette.successBackground,
  error: systemPalette.error,
  errorBackground: systemPalette.errorBackground,
  archived: systemPalette.subduedText,
  archivedBackground: systemPalette.neutralLightBackground,
  basicCloseBtn: systemPalette.subduedText,
  closeBtn: systemPalette.lightText,
  hoverBasicCloseBtn: systemPalette.disabledText,
  hoverPrimaryCloseBtn: systemPalette.hoverPrimary,
  hoverWarningCloseBtn: systemPalette.hoverWarning,
  hoverDangerCloseBtn: systemPalette.hoverDanger,
  hoverSuccessCloseBtn: systemPalette.hoverSuccess,
  hoverErrorCloseBtn: systemPalette.hoverError,
  activePrimaryCloseBtn: systemPalette.activePrimary,
  activeWarningCloseBtn: systemPalette.activeWarning,
  activeDangerCloseBtn: systemPalette.activeDanger,
  activeSuccessCloseBtn: systemPalette.activeSuccess,
  activeErrorCloseBtn: systemPalette.activeError,
};

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

const tagRadii: TagRadii = {
  default: `${radii.base}px`,
};

const tagFontSizes: TagFontSizes = {
  small: `${fontSizes.xsmall}px`,
  medium: `${fontSizes.small}px`,
  large: `${fontSizes.medium}px`,
  closeBtn: `${fontSizes.xsmall}px`,
};

const tagFontWeights: TagFontWeights = {
  default: fontWeights.regular,
};

export {
  tagSpace,
  tagColors,
  tagBorderWidths,
  tagRadii,
  tagFontSizes,
  tagFontWeights,
};