import { useMemo } from 'react';

import { type ReviewDetail } from 'src/pages/dashboard/performance/types';
import { getFullName } from 'src/utils/userUtils';

import NavigationSidebar from '../../components/Shared/NavigationSidebar';
import { type NavigationSidebarGroup } from '../../components/Shared/types';
import { usePerformanceReview } from '../../PerformanceReviewContext';
import { getIsReviewCompleted, groupReviewsByDirection } from '../../utils';

const ReviewNavigationSidebar = () => {
  const { reviews, selectedReview, setSelectedReview } = usePerformanceReview();

  const groups = useMemo<NavigationSidebarGroup<ReviewDetail>[]>(
    () =>
      groupReviewsByDirection(reviews).map(group => ({
        titleKey: group.titleKey,
        items: group.reviews,
      })),
    [reviews],
  );

  return (
    <NavigationSidebar
      groups={groups}
      selectedId={selectedReview ?? null}
      getItemId={review => review.reviewId}
      getUser={review => ({
        id: review.userId,
        profilePicture: review.profilePicture,
        firstName: review.firstName,
        lastName: review.lastName,
        fullName: (review as ReviewDetail & { fullName?: string }).fullName,
      })}
      getPrimaryLabel={review => getFullName(review)}
      isCompleted={getIsReviewCompleted}
      onSelect={review => setSelectedReview(review.reviewId)}
    />
  );
};

export default ReviewNavigationSidebar;