import * as React from 'react';
import {StyleSheet, Text, TouchableOpacity} from 'react-native';
import {Image, View} from 'react-native-animatable';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {normalize, SCREEN_HEIGHT} from '../../utils';

type TaggPromptProps = {
  messageHeader: string;
  messageBody: string | Element;
  logoType: 'plus' | 'tagg';
  hideCloseButton?: boolean;
  noPadding?: boolean;
  onClose: () => void;
};

const TaggPrompt: React.FC<TaggPromptProps> = ({
  messageHeader,
  messageBody,
  logoType,
  hideCloseButton,
  noPadding,
  onClose,
}) => {
  /**
   * Generic prompt for Tagg
   */

  const logo = () => {
    switch (logoType) {
      case 'plus':
        return require('../../assets/icons/plus-logo.png');
      case 'tagg':
      default:
        return require('../../assets/images/logo-purple.png');
    }
  };

  return (
    <View
      style={[
        styles.container,
        {paddingTop: noPadding ? 0 : SCREEN_HEIGHT / 10},
        {paddingBottom: noPadding ? 0 : SCREEN_HEIGHT / 50},
      ]}>
      <Image style={styles.icon} source={logo()} />
      <Text style={styles.header}>{messageHeader}</Text>
      <Text style={styles.subtext}>{messageBody}</Text>
      {!hideCloseButton && (
        <TouchableOpacity
          style={styles.closeButton}
          onPress={() => {
            onClose();
          }}>
          <CloseIcon height={'50%'} width={'50%'} color="gray" />
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    height: SCREEN_HEIGHT / 4.5,
  },
  closeButton: {
    position: 'relative',
    height: '40%',
    bottom: SCREEN_HEIGHT / 6,
    aspectRatio: 1,
    alignSelf: 'flex-end',
  },
  icon: {
    width: normalize(40),
    height: normalize(40),
  },
  header: {
    color: 'black',
    fontSize: normalize(16),
    fontWeight: '600',
    textAlign: 'center',
    marginTop: '2%',
  },
  subtext: {
    color: 'gray',
    fontSize: normalize(12),
    fontWeight: '500',
    lineHeight: normalize(20),
    textAlign: 'center',
    marginTop: '2%',
    width: '95%',
  },
});
export default TaggPrompt;