import React, {useEffect, useState} from 'react';
import {StyleSheet, View, Image} from 'react-native';
import {Button} from 'react-native-elements';
import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
import {UserType} from '../../types';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {CaptionScreenHeader} from '../../components/profile';
import {AuthContext} from '../../routes/authentication';
import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
import moment from 'moment';
import Animated from 'react-native-reanimated';

const NO_USER: UserType = {
  userId: '',
  username: '',
};

/**
 * Individual moment view opened when user clicks on a moment tile
 */
type IndividualMomentRouteProp = RouteProp<
  ProfileStackParams,
  'IndividualMoment'
>;
type IndividualMomentNavigationProp = StackNavigationProp<
  ProfileStackParams,
  'IndividualMoment'
>;
interface IndividualMomentProps {
  route: IndividualMomentRouteProp;
  navigation: IndividualMomentNavigationProp;
}

const IndividualMoment: React.FC<IndividualMomentProps> = ({
  route,
  navigation,
}) => {
  const {
    moment_category,
    path_hash,
    date_time,
    moment_id,
  } = route.params.moment;
  const {isProfileView} = route.params;
  const {
    user: {userId},
  } = React.useContext(AuthContext);
  const [user, setUser] = useState<UserType>(NO_USER);
  const [caption, setCaption] = React.useState(route.params.moment.caption);
  const [elapsedTime, setElapsedTime] = React.useState<string>();
  const handleCaptionUpdate = (caption: string) => {
    setCaption(caption);
  };

  useEffect(() => {
    if (!userId) {
      setUser(NO_USER);
    }
    const timePeriod = async () => {
      const datePosted = moment(date_time);
      const now = moment();
      var time = date_time;
      var difference = now.diff(datePosted, 'seconds');

      //Creating elapsedTime string to display to user
      // 0 to less than 1 minute
      if (difference < 60) {
        time = difference + 'seconds';
      }
      // 1 minute to less than 1 hour
      else if (difference >= 60 && difference < 60 * 60) {
        difference = now.diff(datePosted, 'minutes');
        time = difference + (difference === 1 ? 'minute' : 'minutes');
      }
      //1 hour to less than 1 day
      else if (difference >= 60 * 60 && difference < 24 * 60 * 60) {
        difference = now.diff(datePosted, 'hours');
        time = difference + (difference === 1 ? 'hour' : 'hours');
      }
      //1 day to less than 7 days
      else if (difference >= 24 * 60 * 60 && difference < 7 * 24 * 60 * 60) {
        difference = now.diff(datePosted, 'days');
        time = difference + (difference === 1 ? 'day' : 'days');
      }

      setElapsedTime(time);
    };
    timePeriod();
  }, [date_time, userId]);

  return (
    <View style={styles.contentContainer}>
      <View style={styles.buttonsContainer}>
        <Button
          title="Close"
          buttonStyle={styles.button}
          onPress={() => {
            navigation.navigate('Profile', {isProfileView: isProfileView});
          }}
        />
      </View>
      <CaptionScreenHeader
        style={styles.header}
        {...{title: moment_category}}
      />
      <Image
        style={styles.image}
        source={{uri: path_hash}}
        resizeMode={'cover'}
      />
      <View style={styles.bodyContainer}>
        <Animated.Text style={styles.text}>{caption}</Animated.Text>
        <Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  contentContainer: {
    width: SCREEN_WIDTH,
    paddingTop: StatusBarHeight,
    paddingBottom: SCREEN_HEIGHT,
    backgroundColor: 'transparent',
  },
  buttonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: '3%',
    marginRight: '3%',
  },
  button: {
    backgroundColor: 'transparent',
  },
  shareButtonTitle: {
    fontWeight: 'bold',
    color: '#6EE7E7',
  },
  header: {
    marginVertical: 20,
  },
  image: {
    position: 'relative',
    width: SCREEN_WIDTH,
    aspectRatio: 1,
    marginBottom: '3%',
  },
  bodyContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: '5%',
    marginRight: '5%',
  },
  text: {
    position: 'relative',
    paddingBottom: '1%',
    paddingTop: '1%',
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

export default IndividualMoment;