import React, {useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {RouteProp, useRoute} from '@react-navigation/native';
import {IconConfetti} from '@tabler/icons-react-native';
import {getReviewByTypes} from '@modules/performance/utils';
import {useGetPerformanceCycle} from '@modules/performance/hooks';
import {PerformanceReviewStatus} from '@modules/performance/interfaces';
import {EmptyReviewsList, ReviewsTab} from '@modules/performance/components';
import {RootStackParamList} from '@navigation/interfaces';
import {Screens} from '@shared/constants';

function PendingReviews() {
  const {t} = useTranslation();
  const route =
    useRoute<
      RouteProp<RootStackParamList, Screens.PERFORMANCE_REVIEW_COMPLETE_REVIEWS>
    >();
  const {cycleId} = route.params;
  const {cycle, isLoading, isRefreshing, refetch} =
    useGetPerformanceCycle(cycleId);
  const reviewerFormReviews = useMemo(
    () =>
      cycle?.reviewerFormReviews.filter(
        review =>
          ![
            PerformanceReviewStatus.FINISHED,
            PerformanceReviewStatus.EDIT_REQUESTED,
          ].includes(review.status),
      ),
    [cycle?.reviewerFormReviews],
  );
  const sectionData = useMemo(
    () => getReviewByTypes(reviewerFormReviews || [], 'pending'),
    [reviewerFormReviews],
  );

  return (
    <ReviewsTab
      isLoading={isLoading}
      isRefreshing={isRefreshing}
      refetch={refetch}
      sectionData={sectionData}
      ListEmptyComponent={
        <EmptyReviewsList
          variant="primary"
          Icon={IconConfetti}
          title={t('performance.empty_title_pending')}
          description={t('performance.empty_description_pending')}
        />
      }
    />
  );
}

export default PendingReviews;