import { StyleSheet, View, Text, StyleProp, ViewStyle, TextStyle } from 'react-native';
import React, { ComponentType } from 'react';

import { ThemeType } from '../themes/hero';
import { useTheme } from './ThemeContext';

export type variant = 'info' | 'error' | 'warning' | 'success';

const getStylesByVariant = (
  variant: variant | undefined,
  styles: ThemeType['badge'],
): {
  wrapper: StyleProp<ViewStyle>;
  content: StyleProp<TextStyle>;
} => {
  switch (variant) {
    case 'error':
      return {
        wrapper: styles.errorWrapper,
        content: styles.errorContent,
      };

    case 'warning':
      return {
        wrapper: styles.warningWrapper,
        content: styles.warningContent,
      };

    case 'success':
      return {
        wrapper: styles.successWrapper,
        content: styles.successContent,
      };
    default:
      return { wrapper: styles.infoWrapper, content: styles.infoContent };
  }
};

export type Props = {
  readonly content: string;
  readonly testID?: string;
  readonly variant?: variant;
  readonly wrapperStyle?: StyleProp<ViewStyle>;
  readonly contentStyle?: StyleProp<TextStyle>;
};

const Badge: ComponentType<Props> = ({ variant, content, testID, wrapperStyle = {}, contentStyle = {} }: Props) => {
  const theme = useTheme();

  const styles = getStylesByVariant(variant, theme.badge);

  return (
    <View style={StyleSheet.flatten([theme.badge.wrapper, styles.wrapper, wrapperStyle])}>
      <Text testID={testID} style={StyleSheet.flatten([theme.badge.content, styles.content, contentStyle])}>
        {content}
      </Text>
    </View>
  );
};

export default Badge;