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 {useGetGroupById} from '@modules/group/hooks/useGetGroupById';
import {getGroupRoles} from '@modules/group/utils';
import {useTheme} from '@shared/theme';

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

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

function SharedGroupPost({postId, groupId, withFooter = true, style}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const post = useSharedPostById(postId, groupId);
  const group = useGetGroupById(groupId);
  const isArchived = group.data?.isArchived;
  const {iAmMember} = getGroupRoles(group.data);
  const canInteract = !isArchived && iAmMember;

  return post ? (
    <View
      style={[
        styles.postContainer,
        {
          borderColor: post?.hasBeenSegmented
            ? theme.border.neutral.brand
            : theme.border.neutral.default,
        },
        style,
      ]}>
      <GroupPost
        postId={postId}
        groupId={groupId}
        canInteract={canInteract}
        isArchived={isArchived}
        isPreviewPost
        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 SharedGroupPost;