import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import * as React from 'react';
import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native';
import {Image, View} from 'react-native-animatable';
import {ArrowButton} from '../onboarding';
import {OnboardingStackParams} from '../../routes';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {BlurView} from '@react-native-community/blur';

type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>;
type TaggPopupNavigationProps = StackNavigationProp<
  OnboardingStackParams,
  'TaggPopup'
>;

interface TaggPopupProps {
  route: TaggPopupRouteProps;
  navigation: TaggPopupNavigationProps;
}

const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
  /**
   * Custom popup / Tutorial screen for Tagg
   * Just like a  Singly Linked List, we have a next node
   * if (next !== undefined)
   *    Display the next button and navigate to next popup node on click
   * else
   *    Display close button, navigate back on close
   */
  const {messageHeader, messageBody, next} = route.params.popupProps;

  return (
    <BlurView blurType="light" blurAmount={2} style={styles.container}>
      <TouchableOpacity
        style={styles.container}
        onPressOut={() => {
          navigation.goBack();
        }}>
        <View style={styles.popup}>
          <Image
            style={styles.icon}
            source={require('../../assets/icons/notificationPrompts/plus-logo.png')}
          />
          <View style={styles.textContainer}>
            <Text style={styles.header}>{messageHeader}</Text>
            <Text style={styles.subtext}>{messageBody}</Text>
          </View>
          {!next && (
            <TouchableOpacity
              style={styles.closeButton}
              onPress={() => {
                navigation.goBack();
              }}>
              <CloseIcon height={'50%'} width={'50%'} color={'white'} />
            </TouchableOpacity>
          )}
        </View>
        {next && (
          <View style={styles.footer}>
            <ArrowButton
              direction="forward"
              onPress={() => {
                navigation.navigate('TaggPopup', {popupProps: next});
              }}
            />
          </View>
        )}
      </TouchableOpacity>
    </BlurView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: '100%',
  },
  whiteColor: {
    color: 'white',
  },
  closeButton: {
    position: 'relative',
    height: '50%',
    aspectRatio: 1,
    left: '20%',
  },
  textContainer: {
    flex: 1,
    flexDirection: 'column',
  },
  icon: {
    width: 40,
    height: 40,
    marginVertical: '1%',
  },
  header: {
    color: '#fff',
    fontSize: SCREEN_WIDTH / 25,
    fontWeight: '600',
    textAlign: 'justify',
    marginBottom: '2%',
    marginLeft: '4%',
  },
  subtext: {
    color: '#fff',
    fontSize: SCREEN_WIDTH / 30,
    fontWeight: '600',
    textAlign: 'justify',
    marginBottom: '15%',
    marginLeft: '3%',
  },
  popup: {
    width: SCREEN_WIDTH * 0.8,
    height: SCREEN_WIDTH * 0.24,
    backgroundColor: 'black',
    borderRadius: 8,
    flexDirection: 'row',
    alignSelf: 'auto',
    flexWrap: 'wrap',
    position: 'absolute',
    bottom: SCREEN_HEIGHT * 0.7,
    padding: SCREEN_WIDTH / 40,
  },
  footer: {
    marginLeft: '50%',
    flexDirection: 'column-reverse',
    ...Platform.select({
      ios: {
        bottom: '20%',
      },
      android: {
        bottom: '10%',
      },
    }),
  },
});
export default TaggPopup;