import React, {useCallback, useEffect} from 'react';
import {View} from 'react-native';
import {FlatList} from 'react-native-gesture-handler';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {Navigation} from '@interfaces/navigation';
import FeedPostItem from '@modules/post/components/FeedPostItem';
import {useFeedPosts} from '@modules/post/store/useFeedStore';
import {usePermissions} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

const keyExtractor = (item: number) => `${item}`;

function PinnedPosts({navigation}: Navigation<Screens.PINNED_POSTS>) {
  const {theme} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding();
  const {
    MANAGE_POSTS: canManagePosts,
    MANAGE_COMMENTS: canManageComments,
    MANAGE_FEED_COMMENTS: canManageFeedComments,
  } = usePermissions();
  const {pinnedPostIds} = useFeedPosts();

  useEffect(() => {
    if (!pinnedPostIds.length) {
      navigation.goBack();
    }
  }, [navigation, pinnedPostIds.length]);

  const renderPostItem = useCallback(
    ({item}: {item: number}) => {
      return (
        <FeedPostItem
          postId={item}
          canManagePosts={canManagePosts}
          canManageComments={canManageComments || canManageFeedComments}
        />
      );
    },
    [canManageComments, canManageFeedComments, canManagePosts],
  );

  return (
    <FlatList
      data={pinnedPostIds}
      showsVerticalScrollIndicator={false}
      removeClippedSubviews
      keyExtractor={keyExtractor}
      renderItem={renderPostItem}
      style={{backgroundColor: theme.background.layout.tertiary}}
      contentContainerStyle={[
        styles.contentContainer,
        {backgroundColor: theme.background.layout.default},
      ]}
      ListFooterComponent={
        <View
          style={{
            height: paddingBottom,
            backgroundColor: theme.background.layout.tertiary,
          }}
        />
      }
    />
  );
}

export default PinnedPosts;