import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconMessageCircle, IconUsersGroup} from '@tabler/icons-react-native';
import {Typography, Pressable} from '@components/_core';
import {Button} from '@components/_HuGo';
import {useTheme} from '@shared/theme';
import {capitalize} from '@shared/utils';

import {styles} from './styles';

interface Props {
  onPressComment?: () => void;
  onPressFooter: () => void;
  commentCount: number;
  canAnswerComment?: boolean;
  audienceUsersCount?: number;
  onAudiencePress?: () => void;
}

export function CommentFooter({
  onPressComment,
  onPressFooter,
  commentCount,
  canAnswerComment = true,
  audienceUsersCount,
  onAudiencePress,
}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  return (
    <>
      <View
        style={[styles.line, {borderBottomColor: theme.border.neutral.default}]}
      />
      <View style={styles.container}>
        <Pressable
          onPress={onPressFooter}
          style={[
            styles.commentsQuantity,
            !canAnswerComment && styles.flexEnd,
          ]}>
          {canAnswerComment && (
            <Pressable
              onPress={onPressComment || onPressFooter}
              style={styles.centeredRow}>
              <IconMessageCircle
                color={theme.primaryText}
                size={iconSizes.x4}
              />
              <Typography color={theme.primaryText} weight="semiBold">
                {t('post.comment_action')}
              </Typography>
            </Pressable>
          )}
          <View style={[styles.centeredRow, styles.gap]}>
            <Typography
              variant="xs"
              color={theme.neutralText}
              weight="semiBold">
              {`${commentCount || 0} ${capitalize(
                t('post.comment', {count: commentCount}),
              )}`}
            </Typography>
            {!!audienceUsersCount && (
              <Button
                variant="tertiary"
                onPress={onAudiencePress}
                IconLeft={IconUsersGroup}
                text={audienceUsersCount.toString()}
                style={styles.audienceButton}
              />
            )}
          </View>
        </Pressable>
      </View>
    </>
  );
}