import React, {useEffect, useMemo} from 'react';
import {Navigation} from '@interfaces/navigation';
import {ReviewResults} from '@modules/performance/components';
import {useGetReviewStatus} from '@modules/performance/hooks';
import {Screens} from '@shared/constants';

function PerformanceReviewUserReportScreen({
  navigation,
  route: {
    params: {cycleId, userId, screenTitle, reviewId},
  },
}: Navigation<Screens.PERFORMANCE_REVIEW_USER_REPORT>) {
  const {isLoading, isVisible, summary, reviewOptions, confirmReview} =
    useGetReviewStatus({
      cycleId: cycleId,
      userId: userId,
    });

  const selectedReview = useMemo(
    () => reviewOptions?.find(option => option.id === reviewId),
    [reviewOptions, reviewId],
  );

  /**
   * Set screen title
   */
  useEffect(() => {
    if (screenTitle) {
      navigation.setOptions({
        title: screenTitle,
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [screenTitle]);

  return (
    <ReviewResults
      cycleId={cycleId}
      reviews={reviewOptions}
      summary={summary}
      isLoading={isLoading}
      isVisible={isVisible}
      selectedReview={selectedReview?.id as number}
      confirmReview={confirmReview}
    />
  );
}

export default PerformanceReviewUserReportScreen;