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

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

export type size = 'small' | 'medium' | 'large';

const getStylesBySize = (
  size: null | undefined | size,
  styles: ThemeType['avatar'],
): {
  wrapper: StyleProp<ViewStyle>;
  titleWrapper: StyleProp<ViewStyle>;
  title: StyleProp<TextStyle>;
  image: StyleProp<ImageStyle>;
} => {
  switch (size) {
    case 'large': {
      return {
        wrapper: styles.largeWrapper,
        titleWrapper: styles.largeTitleWrapper,
        title: styles.largeTitle,
        image: styles.largeImage,
      };
    }
    case 'small': {
      return {
        wrapper: styles.smallWrapper,
        titleWrapper: styles.smallTitleWrapper,
        title: styles.smallTitle,
        image: styles.smallImage,
      };
    }
    default: {
      return {
        wrapper: styles.mediumWrapper,
        titleWrapper: styles.mediumTitleWrapper,
        title: styles.mediumTitle,
        image: styles.mediumImage,
      };
    }
  }
};

export type Props = {
  readonly size?: size;
  readonly source?: string;
  readonly testID?: string;
  readonly title?: string;
  readonly titleStyle?: StyleProp<TextStyle>;
  readonly wrapperStyle?: StyleProp<ViewStyle>;
};

const Avatar: React.ComponentType<Props> = ({ size, source, testID, title = '', titleStyle, wrapperStyle }: Props) => {
  const theme = useTheme();

  const styles = getStylesBySize(size, theme.avatar);

  return (
    <View testID={testID} style={StyleSheet.flatten([theme['avatar']['wrapper'], styles['wrapper'], wrapperStyle])}>
      <View style={StyleSheet.flatten([theme['avatar']['titleWrapper'], styles['titleWrapper']])}>
        <Text style={StyleSheet.flatten([theme.avatar.title, styles['title'], titleStyle])}>{title}</Text>
      </View>
      {source !== undefined && (
        <Image
          resizeMode="cover"
          source={{ uri: source }}
          style={StyleSheet.flatten([theme.avatar.image, styles['image']])}
        />
      )}
    </View>
  );
};

export default Avatar;