import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconInfoSquareRounded} from '@tabler/icons-react-native';
import {Avatar, ListEmpty} from '@components';
import {useTheme} from '@shared/theme';

import FeedPostItem from '../FeedPostItem';
import {styles} from './styles';
import {useSharedPostById} from './hooks/useSharedPostById';

interface Props {
  postId: number;
  withFooter?: boolean;
  style?: StyleProp<ViewStyle>;
}

function SharedFeedPost({postId, withFooter = true, style}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const post = useSharedPostById(postId);

  return post ? (
    <View
      style={[
        styles.postContainer,
        {
          borderColor: post?.hasBeenSegmented
            ? theme.border.neutral.brand
            : theme.border.neutral.default,
        },
        style,
      ]}>
      <FeedPostItem
        postId={postId}
        isPreviewPost
        withOptions={false}
        withFooter={withFooter}
      />
    </View>
  ) : (
    <ListEmpty
      title={t('post.shared_post_unavailable_title')}
      description={t('post.shared_post_unavailable_description')}
      IconComponent={<Avatar Icon={IconInfoSquareRounded} size="lg" />}
      style={[
        styles.unavailablePostContainer,
        {borderColor: theme.border.neutral.default},
        style,
      ]}
    />
  );
}

export default SharedFeedPost;