import { mobileAvatarPalette } from '@hero-design/colors';
import type { GlobalTheme } from '../global';

const getAvatarTheme = (theme: GlobalTheme) => {
  const colors = {
    neutral: mobileAvatarPalette.maasstrichtBlueLight25,
    primary: theme.colors.primary,
    info: theme.colors.info,
    danger: theme.colors.error,
    success: theme.colors.success,
    warning: theme.colors.warning,
    text: theme.colors.white,
  };

  const sizes = {
    small: theme.sizes.xlarge,
    medium: theme.sizes.xxlarge,
    large: theme.sizes.xxxlarge,
    xlarge: theme.sizes.xxxxlarge,
    xxlarge: theme.sizes.xxxxxlarge,
    xxxlarge: theme.sizes['7xlarge'],
    xxxxlarge: theme.sizes['9xlarge'],
    xxxxxlarge: theme.sizes['14xlarge'],
  };

  const fonts = {
    default: theme.fonts.neutral.regular,
  };

  const fontSizes = {
    small: theme.fontSizes.large,
    medium: theme.fontSizes.xlarge,
    large: theme.fontSizes.xxlarge,
    xlarge: theme.fontSizes.xxxlarge,
    xxlarge: theme.space.medium * 2,
    xxxlarge: theme.space.large * 1.5,
    xxxxlarge: theme.space.xlarge * 1.5,
    xxxxxlarge: theme.space.xxlarge * 1.5,
  };
  const radii = {
    rounded: theme.radii.rounded,
  };

  const spaces = {
    titleMarginTopForAndroid: {
      small: -theme.space.xxsmall,
      medium: -theme.space.xsmall,
      large: -theme.space.xsmall,
      xlarge: -theme.space.xsmall,
      xxlarge: -theme.space.xsmall - theme.space.xxsmall,
      xxxlarge: -theme.space.xsmall - theme.space.xxsmall,
      xxxxlarge: -theme.space.small,
      xxxxxlarge: -theme.space.small,
    },
  };

  return { colors, spaces, sizes, radii, fonts, fontSizes };
};

export default getAvatarTheme;