import React, {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconUserQuestion} from '@tabler/icons-react-native';
import {ListItem, Pill, Typography} from '@components';
import {
  PerformanceReview,
  PerformanceReviewStatus,
  PerformanceReviewType,
} from '@modules/performance/interfaces';
import {getCompleteName} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  review: PerformanceReview;
  onPress: (review: PerformanceReview) => void;
}

export function ReviewerRowItem({review, onPress}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const isExternalReviewer =
    review.type === PerformanceReviewType.PEER_EXTERNAL_REVIEW;
  const name =
    getCompleteName(
      isExternalReviewer ? review.externalReviewer : review.reviewer,
    ) || t('performance.anonymous');
  const onPressItem = () => onPress(review);
  const normalizedScore = useMemo(
    () => (typeof review.score === 'number' ? review.score / 10 : null),
    [review.score],
  );
  const isPending = useMemo(
    () =>
      [
        PerformanceReviewStatus.PENDING,
        PerformanceReviewStatus.EDIT_PENDING,
      ].includes(review.status) || !review.answered,
    [review.status, review.answered],
  );

  return (
    <ListItem
      style={styles.container}
      onItemPress={onPressItem}
      title={name}
      avatar={{
        url: review.reviewer?.profilePicture,
        name: review.reviewer || review.externalReviewer ? name : undefined,
        Icon:
          !review.reviewer && !review.externalReviewer
            ? IconUserQuestion
            : undefined,
      }}
      withRightIcon
      presentation="card"
      isFirstItem
      isLastItem>
      {isPending ? (
        <Pill text={t('performance.no_evaluated')} variant="warning" />
      ) : typeof review.score === 'number' ? (
        <View style={styles.scoreContainer}>
          <Typography variant="xs" color={theme.text.neutral.lighter}>
            {t('performance.score')}
          </Typography>
          <Typography weight="semiBold">{normalizedScore}</Typography>
        </View>
      ) : null}
    </ListItem>
  );
}