import React, {useCallback, useEffect, useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {CloseButton, SceneMap, TabItem, Tabs, Typography} from '@components';
import {Navigation} from '@interfaces/navigation';
import {useGetPerformanceCycle} from '@modules/performance/hooks';
import {PerformanceReviewCycleStatus} from '@modules/performance/interfaces';
import {Screens} from '@shared/constants';

import PendingReviews from './components/PendingReviews';
import CompletedReviews from './components/CompletedReviews';
import {styles} from './styles';

const ReviewsSceneMap = SceneMap({
  [Screens.PERFORMANCE_REVIEW_PENDING_REVIEWS]: () => (
    <View style={styles.tabContainer}>
      <PendingReviews />
    </View>
  ),
  [Screens.PERFORMANCE_REVIEW_COMPLETED_REVIEWS]: () => (
    <View style={styles.tabContainer}>
      <CompletedReviews />
    </View>
  ),
});

function CompleteReviewsScreen({
  navigation,
  route: {
    params: {cycleId, screenTitle},
  },
}: Navigation<Screens.PERFORMANCE_REVIEW_COMPLETE_REVIEWS>) {
  const {t} = useTranslation();
  const {cycle} = useGetPerformanceCycle(cycleId);

  const hasPendingReviews = useMemo(
    () => cycle?.reviewerFormReviews.some(review => !review.answered),
    [cycle],
  );

  const routes: TabItem[] = useMemo(
    () => [
      {
        key: Screens.PERFORMANCE_REVIEW_PENDING_REVIEWS,
        label: t('performance.reviews.pending_reviews'),
        badge:
          hasPendingReviews &&
          cycle?.status !== PerformanceReviewCycleStatus.FINISHED,
      },
      {
        key: Screens.PERFORMANCE_REVIEW_COMPLETED_REVIEWS,
        label: t('performance.reviews.completed_reviews'),
      },
    ],
    [hasPendingReviews, t, cycle?.status],
  );

  const backToCycles = useCallback(() => navigation.pop(2), [navigation]);

  useEffect(() => {
    const headerRight = () => <CloseButton onPress={backToCycles} />;
    const headerTitle = () => (
      <Typography variant="s" weight="semiBold">
        {screenTitle || ''}
      </Typography>
    );
    navigation.setOptions({headerRight, ...(screenTitle && {headerTitle})});
  }, [navigation, screenTitle, backToCycles]);

  return (
    <Tabs
      routes={routes}
      renderScene={ReviewsSceneMap}
      initialIndex={
        cycle?.status === PerformanceReviewCycleStatus.FINISHED ? 1 : 0
      }
      backgroundColor="background.layout.tertiary"
      lazy
      fullWidth
    />
  );
}

export default CompleteReviewsScreen;