import React, {useEffect, useState} from 'react';
import {StyleSheet, View, Image, Text} from 'react-native';
import {Button} from 'react-native-elements';
import {BlurView} from '@react-native-community/blur';
import {
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
  StatusBarHeight,
  getTimePosted,
} from '../../utils';
import {UserType, CommentType} from '../../types';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {CaptionScreenHeader} from '../../components';
import {AuthContext} from '../../routes/authentication';
import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
import Animated from 'react-native-reanimated';
import {CommentsCount} from '../../components';
import AsyncStorage from '@react-native-community/async-storage';
import {getMomentCommentsCount} from '../../services';

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},
    logout,
  } = 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 [comments_count, setCommentsCount] = React.useState('');

  const handleCaptionUpdate = (caption: string) => {
    setCaption(caption);
  };

  useEffect(() => {
    if (!userId) {
      setUser(NO_USER);
    }
    const timePeriod = async () => {
      setElapsedTime(getTimePosted(date_time));
    };

    const loadComments = async () => {
      const token = await AsyncStorage.getItem('token');
      if (!token) {
        logout();
        return;
      }
      getMomentCommentsCount(moment_id, setCommentsCount, token);
    };

    timePeriod();
    loadComments();
  }, [date_time, userId]);

  return (
    <BlurView
      blurType="light"
      blurAmount={10}
      reducedTransparencyFallbackColor="white"
      style={styles.contentContainer}>
      <View style={styles.buttonsContainer}>
        <Button
          title="Close"
          buttonStyle={styles.button}
          onPress={() => {
            navigation.pop();
          }}
        />
      </View>
      <CaptionScreenHeader
        style={styles.header}
        {...{title: moment_category}}
      />
      <Image
        style={styles.image}
        source={{uri: path_hash}}
        resizeMode={'cover'}
      />

      <View style={styles.bodyContainer}>
        <CommentsCount
          comments_count={comments_count}
          isProfileView={isProfileView}
          moment_id={moment_id}
        />
        <Animated.Text style={styles.text}>{elapsedTime}</Animated.Text>
      </View>
      <Animated.Text style={styles.text}>{caption}</Animated.Text>
    </BlurView>
  );
};
const styles = StyleSheet.create({
  contentContainer: {
    width: SCREEN_WIDTH,
    paddingTop: StatusBarHeight,
    paddingBottom: SCREEN_HEIGHT,
  },
  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: '7%',
    marginRight: '5%',
    marginBottom: '2%',
  },
  text: {
    position: 'relative',
    paddingBottom: '1%',
    paddingTop: '1%',
    marginLeft: '7%',
    marginRight: '2%',
    color: '#ffffff',
    fontWeight: 'bold',
  },
});

export default IndividualMoment;