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 '..';
import {OnboardingStackParams} from '../../routes';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import CloseIcon from '../../assets/ionicons/close-outline.svg';

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 (
    <View style={styles.container}>
      <View style={styles.popup}>
        <Image
          style={styles.icon}
          source={require('../../assets/icons/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>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  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: 16,
    fontWeight: '600',
    textAlign: 'justify',
    marginBottom: '2%',
    marginHorizontal: '2%',
  },
  subtext: {
    color: '#fff',
    fontSize: 12,
    fontWeight: '600',
    textAlign: 'justify',
    marginBottom: '15%',
    marginHorizontal: '2%',
  },
  popup: {
    width: SCREEN_WIDTH * 0.8,
    height: SCREEN_WIDTH * 0.2,
    backgroundColor: 'black',
    borderRadius: 8,
    flexDirection: 'row',
    alignSelf: 'auto',
    flexWrap: 'wrap',
    position: 'absolute',
    bottom: SCREEN_HEIGHT * 0.7,
  },
  footer: {
    marginLeft: '50%',
    flexDirection: 'column-reverse',
    ...Platform.select({
      ios: {
        bottom: '20%',
      },
      android: {
        bottom: '10%',
      },
    }),
  },
});
export default TaggPopup;
