import React, { ComponentType } from 'react';
import { View, StyleSheet, Text, StyleProp, ViewStyle, TextStyle } from 'react-native';
import { ThemeType } from '../themes/hero';
import { useTheme } from './ThemeContext';

export type variant = 'info' | 'error' | 'warning' | 'success';
const getStylesByVariant = (
  variant: undefined | variant,
  styles: ThemeType['message'],
): {
  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 variant?: variant;
  readonly content: string;
  readonly wrapperStyle?: StyleProp<ViewStyle>;
  readonly contentStyle?: StyleProp<TextStyle>;
};

const Message: ComponentType<Props> = ({ variant = 'info', content, wrapperStyle, contentStyle }: Props) => {
  const theme = useTheme();

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

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

export default Message;