import type { GlobalTheme } from '../global';

const getTypographyTheme = (theme: GlobalTheme) => {
  const colors = {
    body: theme.colors.onDefaultGlobalSurface,
    subdued: theme.colors.mutedOnDefaultGlobalSurface,
    primary: theme.colors.primary,
    secondary: theme.colors.secondary,
    info: theme.colors.onInfoSurface,
    danger: theme.colors.onErrorSurface,
    warning: theme.colors.warning,
    success: theme.colors.success,
    inverted: theme.colors.onDarkGlobalSurface,
    archived: theme.colors.onArchivedSurface,
    disabled: theme.colors.disabledOnDefaultGlobalSurface,
    muted: theme.colors.mutedOnDefaultGlobalSurface,
    inactive: theme.colors.inactiveOnDefaultGlobalSurface,
  };

  const fontSizes = {
    xsmall: theme.fontSizes.xsmall,
    small: theme.fontSizes.small,
    medium: theme.fontSizes.medium,
    large: theme.fontSizes.large,
    xlarge: theme.fontSizes.xlarge,
    xxxlarge: theme.fontSizes.xxxlarge,
    xxxxlarge: theme.fontSizes.xxxxlarge,
    xxxxxlarge: theme.fontSizes.xxxxxlarge,
    '6xlarge': theme.fontSizes['6xlarge'],
    '7xlarge': theme.fontSizes['7xlarge'],
    caption: theme.fontSizes.small,
    label: theme.fontSizes.xsmall,
    titles: {
      neutral: {
        h1: theme.fontSizes['7xlarge'],
        h2: theme.fontSizes.xxxxxlarge,
        h3: theme.fontSizes.xxxxlarge,
        h4: theme.fontSizes.xxxlarge,
        h5: theme.fontSizes.xlarge,
        h6: theme.fontSizes.xlarge,
      },
      playful: {
        h1: theme.fontSizes['6xlarge'],
        h2: theme.fontSizes.xxxxxlarge,
        h3: theme.fontSizes.xxxxlarge,
        h4: theme.fontSizes.xxxlarge,
        h5: theme.fontSizes.xlarge,
        h6: theme.fontSizes.large,
      },
    },
    body: {
      neutral: {
        regular: theme.fontSizes.large,
        small: theme.fontSizes.medium,
      },
      playful: {
        regular: theme.fontSizes.xlarge,
        small: theme.fontSizes.large,
      },
    },
  };

  const lineHeights = {
    xsmall: theme.lineHeights.xsmall,
    small: theme.lineHeights.small,
    medium: theme.lineHeights.medium,
    large: theme.lineHeights.large,
    xlarge: theme.lineHeights.xlarge,
    xxxlarge: theme.lineHeights.xxxlarge,
    xxxxlarge: theme.lineHeights.xxxxlarge,
    xxxxxlarge: theme.lineHeights.xxxxxlarge,
    '6xlarge': theme.lineHeights['6xlarge'],
    '7xlarge': theme.lineHeights['7xlarge'],
    caption: theme.lineHeights.small,
    label: theme.lineHeights.xsmall,
    titles: {
      neutral: {
        h1: theme.lineHeights['7xlarge'],
        h2: theme.lineHeights.xxxxxlarge,
        h3: theme.lineHeights.xxxxlarge,
        h4: theme.lineHeights.xxxlarge,
        h5: theme.lineHeights.xxlarge,
        h6: theme.lineHeights.xxlarge,
      },
      playful: {
        h1: theme.lineHeights['6xlarge'],
        h2: theme.lineHeights.xxxxxlarge,
        h3: theme.lineHeights.xxxxlarge,
        h4: theme.lineHeights.xxxlarge,
        h5: theme.lineHeights.xlarge,
        h6: theme.lineHeights.xxlarge,
      },
    },
    body: {
      neutral: {
        regular: theme.lineHeights.large,
        small: theme.lineHeights.medium,
      },
      playful: {
        regular: theme.lineHeights.xlarge,
        small: theme.lineHeights.large,
      },
    },
  };

  const letterSpacings = {
    titles: {
      neutral: {
        h1: 0,
        h2: 1.5,
        h3: 0.24,
        h4: 0,
        h5: 0.24,
        h6: 0.48,
      },
      playful: {
        h1: 1.5,
        h2: 1.5,
        h3: 0.24,
        h4: 0.24,
        h5: 0.24,
        h6: 0.48,
      },
    },
    body: {
      neutral: {
        semiBold: 0.24,
        medium: 0.3,
        regular: 0.48,
        small: 0.48,
      },
      playful: {
        semiBold: 0.54,
        medium: 0.54,
        regular: 0.54,
        small: 0.54,
      },
    },
  };

  const fontWeights = {
    titles: {
      neutral: {
        h1: theme.fonts.neutral.regular,
        h1Italic: theme.fonts.neutral.regularItalic,
        h2: theme.fonts.neutral.semiBold,
        h2Italic: theme.fonts.neutral.semiBoldItalic,
        h3: theme.fonts.neutral.semiBold,
        h3Italic: theme.fonts.neutral.semiBoldItalic,
        h4: theme.fonts.neutral.semiBold,
        h4Italic: theme.fonts.neutral.semiBoldItalic,
        h5: theme.fonts.neutral.semiBold,
        h5Italic: theme.fonts.neutral.semiBoldItalic,
        h6: theme.fonts.neutral.regular,
        h6Italic: theme.fonts.neutral.regularItalic,
      },
      playful: {
        h1: theme.fonts.playful.semiBold,
        h1Italic: theme.fonts.playful.semiBoldItalic,
        h2: theme.fonts.playful.semiBold,
        h2Italic: theme.fonts.playful.semiBoldItalic,
        h3: theme.fonts.playful.semiBold,
        h3Italic: theme.fonts.playful.semiBoldItalic,
        h4: theme.fonts.playful.semiBold,
        h4Italic: theme.fonts.playful.semiBoldItalic,
        h5: theme.fonts.playful.semiBold,
        h5Italic: theme.fonts.playful.semiBoldItalic,
        h6: theme.fonts.playful.regular,
        h6Italic: theme.fonts.playful.regularItalic,
      },
    },
  };

  return {
    colors,
    fonts: theme.fonts,
    fontSizes,
    lineHeights,
    letterSpacings,
    fontWeights,
  };
};

export default getTypographyTheme;