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

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

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

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

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

interface BannerColors {
  bgDanger: string;
  bgError: string;
  bgInfo: string;
  bgSuccess: string;
  bgWarning: string;
  danger: string;
  error: string;
  info: string;
  success: string;
  text: string;
  warning: string;
}

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

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

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

const bannerFontWeights: BannerFontWeights = {
  text: fontWeights.regular,
  title: fontWeights.semiBold,
};

const bannerColors: BannerColors = {
  bgInfo: systemPalette.infoDarkBackground,
  bgSuccess: systemPalette.successDarkBackground,
  bgWarning: systemPalette.warningDarkBackground,
  bgDanger: systemPalette.dangerDarkBackground,
  bgError: systemPalette.errorDarkBackground,
  success: systemPalette.successDark,
  info: systemPalette.info,
  warning: systemPalette.warningDark,
  danger: systemPalette.dangerDark,
  error: systemPalette.errorDark,
  text: systemPalette.text,
};

export {
  bannerSpace,
  bannerFontSizes,
  bannerLineHeights,
  bannerFontWeights,
  bannerColors,
};