import React, {useEffect, useRef, useState} from 'react';
import {StyleSheet} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {useDispatch, useSelector} from 'react-redux';
import {CommentTile} from '.';
import {getComments} from '../../services';
import {RootState} from '../../store/rootReducer';
import {CommentType, ScreenType, TypeOfComment} from '../../types';
export type CommentsContainerProps = {
  screenType: ScreenType;

  //objectId can be either moment_id or comment_id
  objectId: string;
  setCommentsLength?: (count: number) => void;
  newCommentsAvailable: boolean;
  setNewCommentsAvailable: (value: boolean) => void;
  typeOfComment: TypeOfComment;
  setCommentObjectInFocus?: (comment: CommentType | undefined) => void;
  commentObjectInFocus?: CommentType;
};

/**
 * Comments Container to be used for both comments and replies
 */

const CommentsContainer: React.FC<CommentsContainerProps> = ({
  screenType,
  objectId,
  setCommentsLength,
  newCommentsAvailable,
  setNewCommentsAvailable,
  typeOfComment,
  setCommentObjectInFocus,
  commentObjectInFocus,
}) => {
  const {username: loggedInUsername} = useSelector(
    (state: RootState) => state.user.user,
  );
  const [commentsList, setCommentsList] = useState<CommentType[]>([]);
  const dispatch = useDispatch();
  const ref = useRef<ScrollView>(null);

  useEffect(() => {
    //Scroll only if a new comment and not a reply was posted
    const shouldScroll = () =>
      typeOfComment === 'Comment' && !commentObjectInFocus;
    const loadComments = async () => {
      const comments = await getComments(objectId, typeOfComment === 'Thread');
      setCommentsList(comments);
      if (setCommentsLength) {
        setCommentsLength(comments.length);
      }
      setNewCommentsAvailable(false);
    };
    if (newCommentsAvailable) {
      loadComments();
      if (shouldScroll()) {
        setTimeout(() => {
          ref.current?.scrollToEnd();
        }, 500);
      }
    }
  }, [
    dispatch,
    objectId,
    newCommentsAvailable,
    setNewCommentsAvailable,
    setCommentsLength,
    typeOfComment,
    commentObjectInFocus,
  ]);

  return (
    <ScrollView
      ref={ref}
      style={styles.scrollView}
      contentContainerStyle={styles.scrollViewContent}>
      {commentsList &&
        commentsList.map((comment: CommentType) => (
          <CommentTile
            key={comment.comment_id}
            comment_object={comment}
            screenType={screenType}
            typeOfComment={typeOfComment}
            setCommentObjectInFocus={setCommentObjectInFocus}
            newCommentsAvailable={newCommentsAvailable}
            setNewCommentsAvailable={setNewCommentsAvailable}
            canDelete={comment.commenter.username === loggedInUsername}
          />
        ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {},
  scrollViewContent: {
    justifyContent: 'center',
  },
});

export default CommentsContainer;