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

interface AlertSpace {
  compactPadding: string;
  defaultPadding: string;
  iconCompactMarginRight: string;
  iconCompactMarginTop: string;
  iconDefaultMarginRight: string;
  iconDefaultMarginTop: string;
  titleMarginBottom: string;
}

interface AlertFontSizes {
  content: string;
  title: string;
}

interface AlertLineHeights {
  content: string;
  iconCompact: string;
  iconDefault: string;
  title: string;
}

interface AlertFontWeights {
  text: number;
  title: number;
}

interface AlertBorderWidths {
  wrapper: string;
}

interface AlertRadii {
  wrapper: string;
}

interface AlertColors {
  bgDanger: string;
  bgError: string;
  bgInfo: string;
  bgSuccess: string;
  bgWarning: string;
  borderDanger: string;
  borderError: string;
  borderInfo: string;
  borderSuccess: string;
  borderWarning: string;
  text: string;
}

const alertSpace: AlertSpace = {
  iconDefaultMarginTop: `${space.xxsmall}px`,
  iconDefaultMarginRight: `${space.medium}px`,
  iconCompactMarginTop: `${space.xsmall}px`,
  iconCompactMarginRight: `${space.small}px`,
  defaultPadding: `${space.medium}px`,
  compactPadding: `${space.small}px ${space.medium}px`,
  titleMarginBottom: `${space.xsmall}px`,
};

const alertFontSizes: AlertFontSizes = {
  title: `${fontSizes.large}px`,
  content: `${fontSizes.medium}px`,
};

const alertLineHeights: AlertLineHeights = {
  title: `${lineHeights.large}px`,
  content: `${lineHeights.medium}px`,
  iconDefault: `${lineHeights.large}px`,
  iconCompact: `${lineHeights.medium}px`,
};

const alertFontWeights: AlertFontWeights = {
  text: fontWeights.regular,
  title: fontWeights.semiBold,
};

const alertBorderWidths: AlertBorderWidths = {
  wrapper: `${borderWidths.base}px`,
};

const alertRadii: AlertRadii = {
  wrapper: `${radii.base}px`,
};

const alertColors: AlertColors = {
  text: systemPalette.text,
  bgSuccess: systemPalette.successBackground,
  bgInfo: systemPalette.infoBackground,
  bgWarning: systemPalette.warningBackground,
  bgDanger: systemPalette.dangerBackground,
  bgError: systemPalette.errorBackground,
  borderSuccess: systemPalette.success,
  borderInfo: systemPalette.infoBorder,
  borderWarning: systemPalette.warning,
  borderDanger: systemPalette.danger,
  borderError: systemPalette.error,
};

export {
  alertSpace,
  alertFontSizes,
  alertLineHeights,
  alertFontWeights,
  alertBorderWidths,
  alertRadii,
  alertColors,
};