import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {CloseButton, ListFooter, List} from '@components';
import {useDebounce} from '@hooks/useDebounce';
import {Navigation} from '@interfaces/navigation';
import {useGetTeamReport} from '@modules/performance/hooks';
import {
  PerformanceReviewStatus,
  PerformanceReviewUserReport,
  PerformanceReviewUserReportFilter,
} from '@modules/performance/interfaces';
import {PerformanceListSK} from '@modules/performance/skeletons/PerformanceListSK';
import {useUserId} from '@redux/selectors';
import {DEFAULT_THRESHOLD, Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import {ListHeader} from './components/ListHeader';
import {ItemTeam} from './components/ItemTeam';
import {EmptyStates} from './components/EmptyStates';

function PerformanceReviewManageTeam({
  navigation,
  route: {params},
}: Navigation<Screens.PERFORMANCE_REVIEW_MANAGE_TEAM>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const userId = useUserId();
  const [searchText, setSearchText] = useState('');
  const [filterSelected, setFilterSelected] =
    useState<PerformanceReviewUserReportFilter>(
      PerformanceReviewUserReportFilter.ALL,
    );
  const debouncedSearchText = useDebounce(searchText);

  const {
    users,
    hasNextPage,
    isCycleFinished,
    isRefreshing,
    refresh,
    getNextPage,
    isFetchingNextPage,
    teamStats,
    cycle,
    isUsersLoading,
    isStatsLoading,
    isCycleLoading,
    isUsersError,
  } = useGetTeamReport({
    cycleId: params.cycleId,
    responsibleId: userId,
    searchText: debouncedSearchText || undefined,
    pendingActionFilter:
      filterSelected === PerformanceReviewUserReportFilter.ALL ||
      !filterSelected
        ? undefined
        : filterSelected,
  });

  const handleItemPress = useCallback(
    (item: PerformanceReviewUserReport) => () => {
      navigation.navigate(Screens.PERFORMANCE_REVIEW_TEAM_REVIEWERS, {
        cycleId: params.cycleId,
        userId: item.userId,
        screenTitle: cycle?.name,
      });
    },
    [navigation, params.cycleId, cycle?.name],
  );

  const renderItem = useCallback(
    ({item}: {item: PerformanceReviewUserReport}) => (
      <ItemTeam
        userName={`${item.firstName} ${item.lastName}`}
        status={
          isCycleFinished ? PerformanceReviewStatus.FINISHED : item.status
        }
        onPress={handleItemPress(item)}
        image={item.profilePicture}
        totalReviews={item.totalReviews}
        pendingReviews={item.pendingReviews}
        score={item.score}
      />
    ),
    [handleItemPress, isCycleFinished],
  );

  const keyExtractor = useCallback(
    (item: PerformanceReviewUserReport) => `${item.userId}`,
    [],
  );

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

  useEffect(() => {
    const headerRight = () => <CloseButton onPress={backToCycleList} />;
    navigation.setOptions({
      headerRight,
    });
  }, [backToCycleList, navigation]);

  const withSelectionFilter = [
    'OTHERS_REVIEW',
    'PEER_EXTERNAL_REVIEW',
    'PEER_REVIEW',
  ].some(key => key in (teamStats?.statsPerEvaluationType ?? {}));

  const filtersChips = useMemo(() => {
    return [
      {
        label: t('performance.manage_team.filters.all'),
        value: PerformanceReviewUserReportFilter.ALL,
      },
      ...(withSelectionFilter
        ? [
            {
              label: t('performance.manage_team.filters.selection_pending'),
              value: PerformanceReviewUserReportFilter.PENDING_SELECTION,
            },
          ]
        : []),
      {
        label: t('performance.manage_team.filters.evaluation_pending'),
        value: PerformanceReviewUserReportFilter.PENDING_EVALUATION,
      },
      {
        label: t('performance.manage_team.filters.delivery_pending'),
        value: PerformanceReviewUserReportFilter.PENDING_DELIVERY,
      },
    ];
  }, [t, withSelectionFilter]);

  const onFilterPress = useCallback(
    (filter: PerformanceReviewUserReportFilter) => setFilterSelected(filter),
    [],
  );

  const listHeader = useMemo(
    () => (
      <View style={styles.headerContainer}>
        <ListHeader
          teamStats={teamStats}
          isLoading={isStatsLoading || isCycleLoading}
          searchText={searchText}
          setSearchText={setSearchText}
          filtersChips={filtersChips}
          filterSelected={filterSelected}
          onFilterPress={onFilterPress}
        />
      </View>
    ),
    [
      teamStats,
      isStatsLoading,
      isCycleLoading,
      searchText,
      setSearchText,
      filtersChips,
      filterSelected,
      onFilterPress,
    ],
  );

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <List
        data={users}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        showsVerticalScrollIndicator={false}
        ListEmptyComponent={
          isUsersLoading || isCycleLoading ? (
            <PerformanceListSK />
          ) : (
            <EmptyStates
              searchText={debouncedSearchText}
              filter={filterSelected}
            />
          )
        }
        onRefresh={refresh}
        isRefreshing={isRefreshing}
        onNextPage={getNextPage}
        hasNextPage={hasNextPage}
        isFetchingNextPage={isFetchingNextPage}
        onEndReachedThreshold={DEFAULT_THRESHOLD}
        bounces={false}
        ListFooterComponent={
          <ListFooter isFetchingNextPage={isFetchingNextPage} />
        }
        ListHeaderComponent={listHeader}
        style={styles.listContent}
        isError={isUsersError}
      />
    </View>
  );
}

export default PerformanceReviewManageTeam;