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

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

  const sizes = {
    image: theme.sizes['19xlarge'],
    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,
  };

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

type GetSuccessThemeReturnType = ReturnType<typeof getSuccessTheme>;
export interface SuccessThemeType extends GetSuccessThemeReturnType {
  /**
   * @deprecated will be removed in v9
   * */
  fonts: GetSuccessThemeReturnType['fonts'];
  /**
   * @deprecated will be removed in v9
   * */
  fontSizes: GetSuccessThemeReturnType['fontSizes'];
}

export default getSuccessTheme;