import React from 'react';
import {View} from 'react-native';
import {
  MarginKeyboardAwareView,
  Spinner,
  PostOptions,
  AddComment,
} from '@components';
import GroupHeader from '@modules/group/components/GroupHeader';
import {commonStyles} from '@shared/styles';
import {useTheme} from '@shared/theme';

import {GroupPostHeader} from './components/GroupPostHeader';
import {GroupCommentsList} from './components/GroupCommentsList';
import {useGroupPostDetail} from './hooks/useGroupPostDetail';

interface Props {
  id: number;
  groupId: number;
  shouldScrollToComments?: boolean;
  autoFocus?: boolean;
  onOptionsPress?: () => void;
  withOptions?: boolean;
}

function GroupPostDetailScreen({
  id,
  groupId,
  shouldScrollToComments,
  onOptionsPress,
  autoFocus,
  withOptions = true,
}: Props) {
  const {
    post,
    group,
    isArchived,
    iAmMember,
    canInteract,
    iAmAdmin,
    isOwner,
    scrollViewRef,
    handleOptionsPress,
    onPressComment,
    onReactionPress,
    navigateToEditScreen,
    handlePublishComment,
    createPostCommentIsLoading,
    onLayout,
    addCommentRef,
    isPostOptionsVisible,
    setIsPostOptionsVisible,
  } = useGroupPostDetail({
    id,
    groupId,
    shouldScrollToComments,
    onOptionsPress,
  });
  const {theme} = useTheme();

  return (
    <>
      <GroupHeader>
        <GroupHeader.Back />
        {group && <GroupHeader.Title group={group} />}
      </GroupHeader>
      <View
        style={[
          commonStyles.flex,
          {backgroundColor: theme.background.elements.default},
        ]}>
        <MarginKeyboardAwareView>
          <GroupCommentsList
            ref={scrollViewRef}
            ListHeader={
              post ? (
                <GroupPostHeader
                  post={post}
                  groupId={groupId}
                  canManagePosts={iAmAdmin}
                  isArchived={isArchived}
                  iAmMember={!!iAmMember}
                  canInteract={!!canInteract}
                  withOptions={!!withOptions}
                  onLayout={onLayout}
                  onPressOptions={handleOptionsPress}
                  onPressComment={onPressComment}
                  onReactionPress={onReactionPress(post)}
                />
              ) : (
                <Spinner />
              )
            }
            isCreatingComment={createPostCommentIsLoading}
            renderItemParams={{
              iAmAdmin,
              canInteract,
              postId: id,
              groupId,
              isArchived,
            }}
          />
        </MarginKeyboardAwareView>
        {!isArchived && canInteract && post?.commentsEnabled && (
          <AddComment
            keyProp="group-comment-screen-add-comment"
            onPublishComment={handlePublishComment}
            ref={addCommentRef}
            autoFocus={autoFocus}
            groupId={groupId}
          />
        )}
      </View>
      {!isArchived && withOptions && !!post && (
        <PostOptions
          isOwner={isOwner}
          isPinned={!!post.pinned}
          post={post}
          canEdit
          canManagePosts={iAmAdmin}
          navigateToEditScreen={navigateToEditScreen}
          groupId={groupId}
          goBackOnDelete
          isVisible={isPostOptionsVisible}
          setIsVisible={setIsPostOptionsVisible}
        />
      )}
    </>
  );
}

export default GroupPostDetailScreen;