import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {IconPinned} from '@tabler/icons-react-native';
import {Avatar, Badge, Button, Title} from '@components/_HuGo';
import FeedPostItem from '@modules/post/components/FeedPostItem';
import GroupPost from '@modules/group/components/GroupPost';
import {usePostById} from '@modules/post/store/useFeedStore';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  pinnedPostIds: number[];
  groupId?: number;
  canInteract?: boolean;
  isArchived?: boolean;
}

function PinnedPosts({pinnedPostIds, groupId, canInteract, isArchived}: Props) {
  const {navigate} = useNavigation();
  const {theme} = useTheme();
  const {t} = useTranslation();
  const post = usePostById(pinnedPostIds[0]);

  const onPress = () =>
    groupId
      ? navigate(Screens.PINNED_GROUP_POSTS, {groupId})
      : navigate(Screens.PINNED_POSTS);

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <View style={styles.header}>
        <View style={styles.headerLeft}>
          <Avatar Icon={IconPinned} />
          <Title size="s" title={t('post.pinned_posts')} />
          <Badge value={pinnedPostIds.length} show />
        </View>
        <Button
          text={t('post.view_all_pinned_posts')}
          variant="tertiary"
          onPress={onPress}
          style={styles.noPadding}
        />
      </View>
      <View
        style={[
          styles.postContainer,
          {
            borderColor: post?.hasBeenSegmented
              ? theme.border.neutral.brand
              : theme.border.neutral.default,
          },
        ]}>
        {groupId ? (
          <GroupPost
            postId={pinnedPostIds[0]}
            groupId={groupId}
            canInteract={canInteract}
            isArchived={isArchived}
            isPreviewPost
          />
        ) : (
          <FeedPostItem
            postId={pinnedPostIds[0]}
            isPreviewPost
            withOptions={false}
          />
        )}
      </View>
    </View>
  );
}

export default PinnedPosts;