import React from 'react';
import {KeyboardAvoidingView} from 'react-native-keyboard-controller';
import {IconArrowLeft} from '@tabler/icons-react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {
  NewPost,
  IconButton,
  NewPostScreens,
  NewPostStack,
  userToAuthor,
  useNewPost,
} from '@components';
import {useGoBack} from '@hooks/useGoBack';
import {Navigation} from '@interfaces/navigation';
import {UserPermissions} from '@interfaces/user';
import {useSharedPostMetadata} from '@modules/post/hooks/useSharedPostMetadata';
import {usePostDraft} from '@modules/post/store/useFeedStore';
import {usePermission, useUser} from '@redux/selectors';
import {commonStyles} from '@shared/styles';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';
import {useCommunityFeature} from '@stores/communityFeatures';

import {PublishButton} from './components/PublishButton2';

const PublishPostContent = () => {
  const {theme} = useTheme();
  const user = useUser();
  const {goBack} = useGoBack();
  const {post} = useNewPost();
  const sharedPostMetadata = useSharedPostMetadata();
  const displayedSharedPostMetadata = sharedPostMetadata ?? post?.metadata;

  const requestEdit = !!post?._links?.requestEdit;

  const canSegmentate = usePermission(UserPermissions.CAN_SEGMENTATE);
  const canViewGroupPostsInFeed = useCommunityFeature(
    'VIEW_GROUP_POSTS_IN_FEED',
  );

  const disabledSegmentation =
    !canSegmentate || canViewGroupPostsInFeed || requestEdit;

  return (
    <SafeAreaView
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <KeyboardAvoidingView
        style={[
          commonStyles.flex,
          {backgroundColor: theme.background.elements.default},
        ]}
        behavior="height">
        <NewPost.CommonHeader>
          <IconButton variant="flat" onPress={goBack} Icon={IconArrowLeft} />
          <PublishButton />
        </NewPost.CommonHeader>
        <NewPost.ScrollContainer>
          <NewPost.TopContainer>
            <NewPost.Author author={userToAuthor(user)}>
              <NewPost.SegmentationPill disabled={disabledSegmentation} />
            </NewPost.Author>
            <NewPost.Size />
          </NewPost.TopContainer>
          <NewPost.RichTextInput />
          <NewPost.SharedPost metadata={displayedSharedPostMetadata} />
          <NewPost.Multimedia />
        </NewPost.ScrollContainer>
        <NewPost.Suggestions />
        <NewPost.PublishIcons segmentationEnabled={!disabledSegmentation} />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};

const Wrapper = (props: Navigation<Screens.PUBLISH_POST>) => {
  const {post, initialRouteName, sharedPostId, sharedGroupId} =
    props.route.params || {};
  const draft = usePostDraft();

  return (
    <NewPost post={post ?? draft ?? undefined}>
      <NewPost.Navigator initialRouteName={initialRouteName}>
        <NewPostStack.Screen
          options={{headerShown: false}}
          name={NewPostScreens.NewPostMain}
          component={PublishPostContent}
          initialParams={{sharedPostId, sharedGroupId}}
        />
      </NewPost.Navigator>
    </NewPost>
  );
};

export default Wrapper;