import React from 'react';
import {View, Pressable} from 'react-native';
import {shallowEqual} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
import {Image, Pill, Typography, PostReactions} from '@components';
import PostComment from '@components/Post/components/PostBody/components/PostComment';
import {FullPost} from '@modules/post/interfaces';
import {Article} from '@modules/article/interfaces';
import {useToggleArticleReaction} from '@modules/article/hooks/useToggleArticleReaction';
import {useAppSelector} from '@redux/utils';
import {Screens} from '@shared/constants';
import {getTimeAgo} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  article: Article;
}

export function ArticleItem({article}: Props) {
  const navigation = useNavigation();
  const {theme} = useTheme();
  const {canCreateComment, canReact} = useAppSelector(
    ({user: {permissions}}) => ({
      canCreateComment:
        permissions.CREATE_COMMENT || permissions.CREATE_COMMENT_IN_ARTICLES,
      canReact: permissions.CAN_REACT_CONTENT || permissions.CAN_REACT_ARTICLES,
    }),
    shallowEqual,
  );
  const {id, title, coverPicture, reactions, topics, publicationDateTime} =
    article;
  const timeAgo = getTimeAgo(publicationDateTime);

  const {toggleReaction} = useToggleArticleReaction(reactions, id);

  const onArticleReaction = (reaction: string) => {
    toggleReaction(reaction);
  };

  const handleOnPress = () => {
    navigation.navigate(Screens.NEWS_DETAIL, {
      id,
      timeAgo,
    });
  };

  const handleCommentPress = () => {
    navigation.navigate(Screens.NEWS_DETAIL, {
      id,
      timeAgo,
      shouldScrollToComments: true,
    });
  };

  return (
    <Pressable
      onPress={handleOnPress}
      style={[
        styles.articleContainer,
        {backgroundColor: theme.background.elements.default},
      ]}>
      <Image
        style={styles.image}
        source={{uri: coverPicture}}
        onPress={handleOnPress}
      />
      <View style={styles.contentContainer}>
        <View>
          <Typography variant="m" weight="semiBold" numberOfLines={3}>
            {title}
          </Typography>
          <Typography variant="xs" color={theme.text.neutral.lighter}>
            {timeAgo}
          </Typography>
        </View>
        {!!topics?.length && (
          <View style={styles.topics}>
            {topics.map(topic => (
              <Pill key={topic.id} text={topic.name} variant="neutral" />
            ))}
          </View>
        )}
      </View>

      {canReact && (
        <PostReactions
          reactions={article.reactions}
          post={{id: article.id}}
          postId={article.id}
          articleId={article.id}
          handleReaction={onArticleReaction}
          onReactionPickerPress={onArticleReaction}
        />
      )}
      <PostComment
        canComment={canCreateComment}
        post={article as unknown as FullPost}
        handleOnPressComments={handleCommentPress}
        displayLastComment={false}
        articleId={article.id}
      />
    </Pressable>
  );
}