import {RouteProp, useNavigation} from '@react-navigation/native';
import React, {useEffect, useRef} from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useDispatch} from 'react-redux';
import {getMomentComments} from '../..//services';
import BackIcon from '../../assets/icons/back-arrow.svg';
import {CommentTile, TabsGradient} from '../../components';
import {AddComment} from '../../components/';
import {ProfileStackParams} from '../../routes/main';
import {CommentType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';

/**
 * Comments Screen for an image uploaded
 * Displays all comments for a particular moment uploaded by the user followed by a text area to add the comment.
 * Comment is posted when return is pressed on the keypad.
 */

type MomentCommentsScreenRouteProps = RouteProp<
  ProfileStackParams,
  'MomentCommentsScreen'
>;

interface MomentCommentsScreenProps {
  route: MomentCommentsScreenRouteProps;
}

const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
  const navigation = useNavigation();
  const {moment_id, screenType} = route.params;
  const [commentsList, setCommentsList] = React.useState([]);
  const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
  const dispatch = useDispatch();
  const ref = useRef<ScrollView>(null);

  useEffect(() => {
    const loadComments = async () => {
      getMomentComments(moment_id, setCommentsList);
      setNewCommentsAvailable(false);
    };
    if (newCommentsAvailable) {
      loadComments();
      setTimeout(() => {
        ref.current?.scrollToEnd({
          animated: true,
        });
      }, 500);
    }
  }, [dispatch, moment_id, newCommentsAvailable]);

  return (
    <View style={styles.background}>
      <SafeAreaView>
        <View style={styles.header}>
          <TouchableOpacity
            style={styles.headerButton}
            onPress={() => {
              navigation.pop();
            }}>
            <BackIcon height={'100%'} width={'100%'} color={'white'} />
          </TouchableOpacity>
          <Text style={styles.headerText}>
            {commentsList.length + ' Comments'}
          </Text>
        </View>
        <View style={styles.body}>
          <ScrollView
            ref={ref}
            style={styles.scrollView}
            contentContainerStyle={styles.scrollViewContent}>
            {commentsList &&
              commentsList.map((comment: CommentType) => (
                <CommentTile
                  key={comment.comment_id}
                  comment_object={comment}
                  screenType={screenType}
                />
              ))}
          </ScrollView>
          <AddComment
            setNewCommentsAvailable={setNewCommentsAvailable}
            moment_id={moment_id}
          />
        </View>
      </SafeAreaView>
      <TabsGradient />
    </View>
  );
};

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'white',
    height: '100%',
  },
  header: {justifyContent: 'center', padding: '3%'},
  headerText: {
    position: 'absolute',
    alignSelf: 'center',
    fontSize: 20.5,
    fontWeight: '600',
  },
  headerButton: {
    width: '5%',
    aspectRatio: 1,
    padding: 0,
    marginLeft: '5%',
    alignSelf: 'flex-start',
  },
  headerButtonText: {
    color: 'black',
    fontSize: 18,
    fontWeight: '400',
  },
  body: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT * 0.8,
    paddingTop: '3%',
  },
  scrollView: {
    paddingHorizontal: 20,
  },
  scrollViewContent: {
    justifyContent: 'center',
  },
});

export default MomentCommentsScreen;