import React, {useEffect, useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux';
import {
  IconFileCheck,
  IconFileExport,
  IconFiles,
  IconProgressCheck,
} from '@tabler/icons-react-native';
import {Navigation} from '@interfaces/navigation';
import {
  useGetPerformanceCycle,
  useGetPerformanceNotifications,
} from '@modules/performance/hooks';
import {
  setCycleReview,
  setPerformanceTotalPendingReviews,
} from '@modules/performance/redux';
import {PerformanceReviewCycleStatus} from '@modules/performance/interfaces';
import {ReviewNotReady} from '@modules/performance/components/ReviewResults/components/ReviewNotReady';
import {PerformanceListSK} from '@modules/performance/skeletons/PerformanceListSK';
import {useUserId} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';
import {Item} from './components/Item';

function PerformanceReviewCycleDetailScreen({
  navigation,
  route: {params},
}: Navigation<Screens.PERFORMANCE_REVIEW_CYCLE_DETAIL>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const dispatch = useDispatch();
  const {cycleId, screenTitle} = params;
  const userId = useUserId();
  const {
    cycle,
    isResponsible,
    isReviewed,
    isReviewer,
    reviewsToShare,
    isLoading,
  } = useGetPerformanceCycle(cycleId);
  const hasReviewPendingToShare = !!reviewsToShare?.length;
  const headerTitle = screenTitle || cycle?.name;
  const reviewNotReady = useMemo(
    () =>
      !isLoading &&
      !isResponsible &&
      !isReviewer &&
      !hasReviewPendingToShare &&
      !isReviewed,
    [isLoading, isResponsible, isReviewer, hasReviewPendingToShare, isReviewed],
  );

  const navigationHandlers = useMemo(
    () => ({
      onTeamProgressPress: () =>
        navigation.navigate(Screens.PERFORMANCE_REVIEW_MANAGE_TEAM, {cycleId}),
      onCompleteReviewsPress: () =>
        navigation.navigate(Screens.PERFORMANCE_REVIEW_COMPLETE_REVIEWS, {
          cycleId,
          screenTitle,
        }),
      onDeliverResultsPress: () =>
        navigation.navigate(Screens.PERFORMANCE_REVIEW_DELIVER_RESULTS, {
          cycleId,
          screenTitle,
        }),
      onMyResultsPress: () =>
        navigation.navigate(Screens.PERFORMANCE_REVIEW_TEAM_REVIEWERS, {
          cycleId,
          screenTitle,
          userId,
        }),
    }),
    [navigation, cycleId, screenTitle, userId],
  );

  useEffect(() => {
    if (headerTitle) {
      navigation.setOptions({title: headerTitle});
    }
  }, [headerTitle, navigation]);

  /**
   * Update store data with total pending reviews & array of pending reviews id
   */
  useEffect(() => {
    if (cycle) {
      dispatch(
        setPerformanceTotalPendingReviews(cycle.reviewerFormReviews.length),
      );

      const pendingReviews = cycle.reviewerFormReviews
        .filter(review => !review.answered)
        .map(review => review.id);

      dispatch(
        setCycleReview({
          cycleId: cycle.id,
          reviewIds: pendingReviews,
        }),
      );
    }
  }, [cycle, dispatch]);

  useGetPerformanceNotifications();

  const isCycleFinished =
    cycle?.status === PerformanceReviewCycleStatus.FINISHED;

  return isLoading ? (
    <View
      style={[
        styles.skeleton,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <PerformanceListSK />
    </View>
  ) : (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <View style={styles.content}>
        {isResponsible && (
          <Item
            text={t('performance.team_progress')}
            onPress={navigationHandlers.onTeamProgressPress}
            IconItem={IconProgressCheck}
          />
        )}
        {isReviewer && (
          <>
            <Item
              text={t(
                isCycleFinished
                  ? 'performance.completed_reviews'
                  : 'performance.complete_reviews',
              )}
              onPress={navigationHandlers.onCompleteReviewsPress}
              IconItem={IconFiles}
            />
            {hasReviewPendingToShare && (
              <Item
                text={t('performance.deliver_results')}
                onPress={navigationHandlers.onDeliverResultsPress}
                IconItem={IconFileExport}
              />
            )}
          </>
        )}
        {isReviewed && (
          <Item
            text={t('performance.my_results')}
            onPress={navigationHandlers.onMyResultsPress}
            IconItem={IconFileCheck}
          />
        )}
      </View>
      {reviewNotReady && <ReviewNotReady isReviewed={false} />}
    </View>
  );
}

export default PerformanceReviewCycleDetailScreen;