import {StyleSheet} from 'react-native';
import {
  getAppearanceSource,
  NewThemeColors,
  SPACING,
  ThemeAppearance,
  ThemeColors,
} from '@shared/theme';

import {AvatarSize, AvatarVariant} from './interfaces';

export const getColorsVariant = ({
  variant,
  appearance,
  theme,
}: {
  variant: AvatarVariant;
  appearance: ThemeAppearance;
  theme: ThemeColors & NewThemeColors;
}) => {
  const source =
    appearance === 'auto' ? theme : getAppearanceSource(appearance);

  return {
    default: {
      backgroundColor: source.background.elements.grey,
      color: source.icon.neutral.default,
    },
    primary: {
      backgroundColor: source.background.elements.brand,
      color: source.icon.neutral.brand,
    },
    highlight: {
      backgroundColor: source.background.feedback.highlight,
      color: source.icon.feedback.highlight,
    },
    success: {
      backgroundColor: source.background.feedback.success,
      color: source.icon.feedback.success,
    },
    error: {
      backgroundColor: source.background.feedback.error,
      color: source.icon.feedback.error,
    },
    warning: {
      backgroundColor: source.background.feedback.warning,
      color: source.icon.feedback.warning,
    },
    info: {
      backgroundColor: source.background.feedback.info,
      color: source.icon.feedback.info,
    },
  }[variant];
};

export const getImageSizes = (size: AvatarSize) => {
  return {
    xxl: {
      containerSize: SPACING.x16,
      contentSize: SPACING.x8,
    },
    xl: {
      containerSize: SPACING.x13,
      contentSize: SPACING.x7,
    },
    lg: {
      containerSize: SPACING.x8,
      contentSize: SPACING.x4,
    },
    md: {
      containerSize: SPACING.x5,
      contentSize: SPACING.x3,
    },
    sm: {
      containerSize: SPACING.x4,
      contentSize: SPACING.x3,
    },
    xs: {
      containerSize: SPACING.x3,
      contentSize: SPACING.x2,
    },
  }[size];
};

export const styles = StyleSheet.create({
  live: {borderWidth: 2},
  container: {
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  emoji: {
    fontSize: 28,
    letterSpacing: 0.2,
    lineHeight: 32,
  },
});
