import React, {useCallback, useEffect} from 'react';
import {useNavigation} from '@react-navigation/native';
import {Post as PostType} from '@modules/post/interfaces';
import {PostDetailContent} from '@modules/post/screens/PostDetail/component/PostDetailWithComments';
import {EventPost} from '@modules/events/interfaces';
import {useEventPostDetailWithComments} from '@modules/events/hooks/useEventPostDetailWithComments';
import useReactToEventComments from '@modules/events/hooks/useReactToEventComments';
import {useReactToEventPost} from '@modules/events/hooks/useReactToEventPost';
import {
  useEventPostById,
  useEventFeedLoadingStates,
  useEventFeedActions,
} from '@modules/events/store/useEventPostsStore';
import {useEventEditPostStore} from '@modules/events/store/useEventEditPostStore';
import {usePermissions} from '@redux/selectors';
import {Screens} from '@shared/constants';

interface EventPostDetailWithCommentsProps {
  eventId: number;
  postId: number;
  shouldScrollToComments?: boolean;
  autoFocus?: boolean;
}

export function EventPostDetailWithComments({
  eventId,
  postId,
  shouldScrollToComments,
  autoFocus,
}: EventPostDetailWithCommentsProps) {
  const navigation = useNavigation();
  const post = useEventPostById(eventId, postId);
  const {isLoadingPostDetail} = useEventFeedLoadingStates(eventId);
  const {fetchPostDetail} = useEventFeedActions(eventId);
  const {togglePostReaction} = useReactToEventPost(eventId);
  const setPendingEdit = useEventEditPostStore(s => s.setPendingEdit);

  const onReactionPress = useCallback(
    (postToUpdate: PostType, reaction: string) => {
      togglePostReaction({
        post: postToUpdate as unknown as EventPost,
        reaction,
      });
    },
    [togglePostReaction],
  );

  const onNavigateToEditScreen = useCallback(() => {
    setPendingEdit(eventId, postId);
    navigation.navigate(Screens.EVENT_DETAIL, {eventId});
  }, [eventId, postId, navigation, setPendingEdit]);

  const loadPost = useCallback(async () => {
    const postResponse = await fetchPostDetail(eventId, postId);
    if (!postResponse) {
      navigation.goBack();
    }
  }, [eventId, postId, fetchPostDetail, navigation]);

  useEffect(() => {
    if (!eventId || !postId) return;

    loadPost();
  }, [eventId, postId, loadPost]);

  const refetchPost = useCallback(() => {
    if (eventId && postId) {
      fetchPostDetail(eventId, postId);
    }
  }, [eventId, postId, fetchPostDetail]);

  const {
    MANAGE_COMMENTS: canManageCommentsGeneral,
    MANAGE_FEED_COMMENTS: canManageCommentsFeed,
    CREATE_COMMENT: canCommentGeneral,
    CREATE_COMMENT_IN_POSTS: canCommentInPosts,
    VIEW_POSTS: canViewPosts,
    MANAGE_POSTS: canManagePosts,
    REQUEST_FEED_POST_APPROVAL: requestFeedPostApproval,
    CAN_APPROVE_FEED_POSTS: canApproveFeedPosts,
  } = usePermissions();

  const canManageComments = canManageCommentsGeneral || canManageCommentsFeed;
  const canComment = canCommentGeneral || canCommentInPosts;

  const {toggleCommentReaction: onToggleCommentReaction} =
    useReactToEventComments(eventId);

  const postDetailWithComments = useEventPostDetailWithComments({
    eventId,
    postId,
    shouldScrollToComments,
    autoFocus,
    post: post as unknown as PostType,
    isLoadingPost: isLoadingPostDetail,
    refetchPost,
    canComment,
    canViewPosts,
    onReactionPress,
    onNavigateToEditScreen,
  });

  return (
    <PostDetailContent
      {...postDetailWithComments}
      commentsEnabled={Boolean(postDetailWithComments.commentsEnabled)}
      canComment={canComment}
      canManagePosts={false}
      canManageComments={canManageComments}
      canApproveFeedPosts={canApproveFeedPosts}
      requestFeedPostApproval={requestFeedPostApproval}
      navigateToEditScreen={postDetailWithComments.navigateToEditScreen}
      withOptions
      autoFocus={autoFocus}
      showKeyUpdateOptions={false}
      showCopyLinkOptions={false}
      eventId={eventId}
      renderItemParams={{
        postId,
        eventId,
        canManagePosts,
        canManageComments,
        onToggleCommentReaction,
      }}
    />
  );
}