import React, {useRef, useEffect, useState} from 'react';
import {StyleSheet} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {useDispatch} from 'react-redux';
import {CommentTile} from '.';
import {getMomentComments} from '../../services';
import {CommentType, ScreenType, TypeOfComment} from '../../types';
export type CommentsContainerProps = {
  screenType: ScreenType;
  moment_id: string;
  setCommentsLength?: (count: number) => void;
  newCommentsAvailable: boolean;
  setNewCommentsAvailable: (value: boolean) => void;
  typeOfComment: TypeOfComment;
};

const CommentsContainer: React.FC<CommentsContainerProps> = ({
  screenType,
  moment_id,
  setCommentsLength,
  newCommentsAvailable,
  setNewCommentsAvailable,
  typeOfComment,
}) => {
  const [commentsList, setCommentsList] = useState<CommentType[]>([]);
  const dispatch = useDispatch();
  const ref = useRef<ScrollView>(null);

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

  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}
          />
        ))}
    </ScrollView>
  );
};

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

export default CommentsContainer;