import * as React from 'react';
import {Text} from 'react-native-animatable';
import {StyleSheet, TouchableOpacity} from 'react-native';
import CommentIcon from '../../assets/icons/moment-comment-icon.svg';
import {useNavigation} from '@react-navigation/native';
import {ScreenType} from '../../types';

/**
 * Provides a view for the comment icon and the comment count.
 * When the user clicks on this view, a new screen opens to display all the comments.
 */

type CommentsCountProps = {
  comments_count: string;
  moment_id: string;
  screenType: ScreenType;
};

const CommentsCount: React.FC<CommentsCountProps> = ({
  comments_count,
  moment_id,
  screenType,
}) => {
  const navigation = useNavigation();
  const navigateToCommentsScreen = async () => {
    navigation.push('MomentCommentsScreen', {
      moment_id,
      screenType,
    });
  };
  return (
    <>
      <TouchableOpacity onPress={() => navigateToCommentsScreen()}>
        <CommentIcon style={styles.image} />
        <Text style={styles.count}>
          {comments_count !== '0' ? comments_count : ''}
        </Text>
      </TouchableOpacity>
    </>
  );
};

const styles = StyleSheet.create({
  image: {
    position: 'relative',
    width: 21,
    height: 21,
  },
  count: {
    position: 'relative',
    fontWeight: 'bold',
    color: 'white',
    paddingTop: '3%',
    textAlign: 'center',
  },
});

export default CommentsCount;