import {RouteProp, useNavigation} from '@react-navigation/native';
import React, {useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import BackIcon from '../../assets/icons/back-arrow.svg';
import {TabsGradient} from '../../components';
import {AddComment} from '../../components/';
import CommentsContainer from '../../components/comments/CommentsContainer';
import {ADD_COMMENT_TEXT} from '../../constants/strings';
import {MainStackParams} 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<
  MainStackParams,
  'MomentCommentsScreen'
>;

interface MomentCommentsScreenProps {
  route: MomentCommentsScreenRouteProps;
}

const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
  const navigation = useNavigation();
  const {moment_id, screenType} = route.params;

  //Receives comment length from child CommentsContainer
  const [commentsLength, setCommentsLength] = useState<number>(0);
  const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);

  //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
  const [commentObjectInFocus, setCommentObjectInFocus] = useState<
    CommentType | undefined
  >(undefined);

  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}>{commentsLength + ' Comments'}</Text>
        </View>
        <View style={styles.body}>
          <CommentsContainer
            objectId={moment_id}
            screenType={screenType}
            setCommentsLength={setCommentsLength}
            newCommentsAvailable={newCommentsAvailable}
            setNewCommentsAvailable={setNewCommentsAvailable}
            setCommentObjectInFocus={setCommentObjectInFocus}
            commentObjectInFocus={commentObjectInFocus}
            typeOfComment={'Comment'}
          />
          <AddComment
            placeholderText={
              commentObjectInFocus
                ? ADD_COMMENT_TEXT(commentObjectInFocus.commenter.username)
                : ADD_COMMENT_TEXT()
            }
            setNewCommentsAvailable={setNewCommentsAvailable}
            objectId={
              commentObjectInFocus ? commentObjectInFocus.comment_id : moment_id
            }
            isCommentInFocus={commentObjectInFocus ? true : false}
          />
        </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;