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

const getErrorTheme = (theme: GlobalTheme) => {
  const space = {
    titleMarginBottom: theme.space.small,
    imageMarginBottom: theme.space.large,
    wrapperPadding: theme.space.large,
    button: {
      wrapperHorizontalPadding: theme.space.large,
      wrapperVerticalPadding: theme.space.xxxlarge,
      margin: theme.space.medium,
      padding: theme.space.medium,
    },
  };

  const sizes = {
    image: theme.sizes['6xlarge'],
    icon: theme.sizes['6xlarge'],
  };

  const colors = {
    title: theme.colors.onDefaultGlobalSurface,
    description: theme.colors.mutedOnDefaultGlobalSurface,
    fullScreenBackground: theme.colors.defaultGlobalSurface,
    inPageBackground: theme.colors.neutralGlobalSurface,
  };

  const fontSizes = {
    title: theme.fontSizes.xxxlarge,
    description: theme.fontSizes.xlarge,
  };

  const fonts = {
    title: theme.fonts.playful.semiBold,
    description: theme.fonts.playful.regular,
  };

  const lineHeight = {
    title: theme.lineHeights.xxxlarge,
    description: theme.lineHeights.xlarge,
  };

  return { fontSizes, colors, sizes, space, fonts, lineHeight };
};

type GetErrorThemeReturnType = ReturnType<typeof getErrorTheme>;
export interface ErrorThemeType extends GetErrorThemeReturnType {
  /**
   * @deprecated will be removed in v9
   * */
  fonts: GetErrorThemeReturnType['fonts'];
  /**
   * @deprecated will be removed in v9
   * */
  fontSizes: GetErrorThemeReturnType['fontSizes'];
  /**
   * @deprecated will be removed in v9
   * */
  lineHeight: GetErrorThemeReturnType['lineHeight'];
}

export default getErrorTheme;