import {
  RouteProp,
  useFocusEffect,
  useNavigation,
} from '@react-navigation/native';
import React, {useCallback, useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {TabsGradient} from '../../components';
import {AddComment} from '../../components/';
import CommentsContainer from '../../components/comments/CommentsContainer';
import {ADD_COMMENT_TEXT} from '../../constants/strings';
import {headerBarOptions, MainStackParams} from '../../routes/main';
import {CommentThreadType, CommentType} from '../../types';
import {HeaderHeight, 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;
}

type MomentCommentContextType = {
  commentTapped: CommentType | CommentThreadType | undefined;
  setCommentTapped: (
    comment: CommentType | CommentThreadType | undefined,
  ) => void;
  shouldUpdateAllComments: boolean;
  setShouldUpdateAllComments: (available: boolean) => void;
};

export const CommentContext = React.createContext(
  {} as MomentCommentContextType,
);

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

  //Receives comment length from child CommentsContainer
  const [commentsLength, setCommentsLength] = useState<number>(0);
  const [shouldUpdateAllComments, setShouldUpdateAllComments] =
    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 [commentTapped, setCommentTapped] = useState<
    CommentType | CommentThreadType | undefined
  >();

  useFocusEffect(
    useCallback(() => {
      navigation.dangerouslyGetParent()?.setOptions({
        tabBarVisible: false,
      });
      return () => {
        navigation.dangerouslyGetParent()?.setOptions({
          tabBarVisible: true,
        });
      };
    }, [navigation]),
  );

  useEffect(() => {
    navigation.setOptions({
      ...headerBarOptions('black', `${commentsLength} Comments`),
    });
  }, [commentsLength, navigation]);

  return (
    <CommentContext.Provider
      value={{
        commentTapped,
        setCommentTapped,
        shouldUpdateAllComments,
        setShouldUpdateAllComments,
      }}>
      <View style={styles.background}>
        <SafeAreaView>
          <View style={styles.body}>
            <CommentsContainer
              objectId={moment_id}
              commentId={comment_id}
              screenType={screenType}
              shouldUpdate={shouldUpdateAllComments}
              setShouldUpdate={setShouldUpdateAllComments}
              isThread={false}
              setCommentsLengthParent={setCommentsLength}
            />
            <AddComment
              placeholderText={
                !commentTapped
                  ? ADD_COMMENT_TEXT()
                  : ADD_COMMENT_TEXT(commentTapped.commenter.username)
              }
              momentId={moment_id}
            />
          </View>
        </SafeAreaView>
        <TabsGradient />
      </View>
    </CommentContext.Provider>
  );
};

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'white',
    height: '100%',
  },
  body: {
    marginTop: HeaderHeight,
    width: SCREEN_WIDTH * 0.95,
    height: SCREEN_HEIGHT * 0.8,
    paddingTop: '3%',
  },
});

export default MomentCommentsScreen;