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

interface ModalColors {
  body: string;
  containerBackground: string;
  contentBackground: string;
  headerBasic: string;
  headerBasicBackground: string;
  headerPrimary: string;
  headerPrimaryBackground: string;
}

interface ModalSizes {
  contentDoubleExtraLargeMaxWidth: string;
  contentDoubleExtraLargeMinWidth: string;
  contentExtraLargeMaxWidth: string;
  contentExtraLargeMinWidth: string;
  contentLargeMaxWidth: string;
  contentLargeMinWidth: string;
  contentMediumMaxWidth: string;
  contentMediumMinWidth: string;
  contentSmallMaxWidth: string;
  contentSmallMinWidth: string;
}

interface ModalSpace {
  bodyPadding: string;
  footerPadding: string;
  headerPadding: string;
  popUpBodyPadding: string;
  popUpIconMarginRight: string;
  popUpTitleMarginBottom: string;
  wrapperPaddingY: string;
}

interface ModalFontSizes {
  body: string;
  header: string;
  popUpIcon: string;
}

interface ModalFontWeights {
  body: number;
  header: number;
}

interface ModalLineHeights {
  body: string;
  header: string;
}

interface ModalRadii {
  content: string;
  header: string;
}

const colorWithOpacity = (color: string, opacity: number): string =>
  `${color}${(opacity * 255).toString(16)}`;

const modalColors: ModalColors = {
  headerBasicBackground: systemPalette.defaultLightBackground,
  headerBasic: systemPalette.text,
  headerPrimaryBackground: systemPalette.primaryHeaderBackground,
  headerPrimary: systemPalette.text,
  contentBackground: systemPalette.defaultLightBackground,
  containerBackground: colorWithOpacity(
    systemPalette.defaultDarkBackground,
    0.6
  ),
  body: systemPalette.bodyText,
};

const modalSizes: ModalSizes = {
  contentSmallMinWidth: '300px',
  contentSmallMaxWidth: '400px',
  contentMediumMinWidth: '400px',
  contentMediumMaxWidth: '600px',
  contentLargeMinWidth: '600px',
  contentLargeMaxWidth: '800px',
  contentExtraLargeMinWidth: '800px',
  contentExtraLargeMaxWidth: '960px',
  contentDoubleExtraLargeMinWidth: '960px',
  contentDoubleExtraLargeMaxWidth: '1200px',
};

const modalSpace: ModalSpace = {
  headerPadding: `${space.medium}px ${space.large}px`,
  bodyPadding: `${space.medium}px ${space.large}px`,
  popUpBodyPadding: `${space.medium}px ${space.large}px 0 ${space.large}px`,
  footerPadding: `${space.medium}px ${space.large}px`,
  popUpIconMarginRight: `${space.medium}px`,
  popUpTitleMarginBottom: `${space.small}px`,
  wrapperPaddingY: '2.5vh',
};

const modalFontSizes: ModalFontSizes = {
  header: `${fontSizes.xlarge}px`,
  body: `${fontSizes.medium}px`,
  popUpIcon: `${fontSizes.xxxxxlarge}px`,
};

const modalFontWeights: ModalFontWeights = {
  header: fontWeights.semiBold,
  body: fontWeights.regular,
};

const modalLineHeights: ModalLineHeights = {
  header: `${lineHeights.xlarge}px`,
  body: `${lineHeights.medium}px`,
};

const modalRadii: ModalRadii = {
  header: `${radii.medium}px ${radii.medium}px 0 0`,
  content: `${radii.medium}px`,
};

export {
  modalColors,
  modalSizes,
  modalSpace,
  modalFontSizes,
  modalFontWeights,
  modalLineHeights,
  modalRadii,
};