import * as React from 'react';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {MainStackParams} from '../../routes';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {StyleSheet, Text, View} from 'react-native';
import {Moment} from '../../components';
import {Image} from 'react-native-animatable';
import {UPLOAD_MOMENT_PROMPT_ONE_MESSAGE} from '../../constants/strings';

type MomentUploadPromptScreenRouteProp = RouteProp<
  MainStackParams,
  'MomentUploadPrompt'
>;
type MomentUploadPromptScreenNavigationProp = StackNavigationProp<
  MainStackParams,
  'MomentUploadPrompt'
>;

interface MomentUploadPromptScreenProps {
  route: MomentUploadPromptScreenRouteProp;
  navigation: MomentUploadPromptScreenNavigationProp;
}

const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
  route,
  navigation,
}) => {
  const {screenType, momentCategory} = route.params;
  return (
    <View style={styles.container}>
      <CloseIcon
        height={'10%'}
        width={'10%'}
        color={'white'}
        style={styles.closeButton}
        onPress={() => {
          navigation.goBack();
        }}
      />

      <Text style={styles.text}>{UPLOAD_MOMENT_PROMPT_ONE_MESSAGE}</Text>
      <Image
        source={require('../../assets/gifs/dotted-arrow-white.gif')}
        style={styles.arrowGif}
      />
      <Moment
        key={1}
        title={momentCategory}
        images={[]}
        userXId={undefined}
        screenType={screenType}
        handleMomentCategoryDelete={() => {}}
        shouldAllowDeletion={false}
        showDownButton={false}
        showUpButton={false}
        externalStyles={{
          container: styles.momentContainer,
          titleText: styles.momentHeaderText,
          header: styles.momentHeader,
          scrollContainer: styles.momentScrollContainer,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'center',
  },
  closeButton: {
    position: 'relative',
    height: '48%',
    aspectRatio: 1,
    top: 20,
  },
  text: {
    justifyContent: 'center',
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
    position: 'relative',
    top: '40%',
  },
  arrowGif: {
    position: 'relative',
    width: '25%',
    height: '40%',
    left: '40%',
    aspectRatio: 1.2,
    top: '50%',
    transform: [{scaleX: -1}, {rotate: '15deg'}],
  },

  //Styles to adjust moment container
  momentScrollContainer: {
    backgroundColor: 'transparent',
  },
  momentContainer: {
    top: '62%',
    backgroundColor: 'transparent',
  },
  momentHeaderText: {
    paddingBottom: '5%',
  },
  momentHeader: {
    backgroundColor: 'transparent',
  },
});

export default MomentUploadPromptScreen;