import React, {useCallback, useEffect} from 'react';
import {ListRenderItem} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCheck} from '@tabler/icons-react-native';
import {Avatar, List, Title} from '@components';
import {Navigation} from '@interfaces/navigation';
import {ReviewRowItem} from '@modules/performance/components';
import {PerformanceReview} from '@modules/performance/interfaces';
import {useGetPerformanceCycle} from '@modules/performance/hooks';
import {PerformanceListSK} from '@modules/performance/skeletons/PerformanceListSK';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

function DeliverResultsScreen({
  navigation,
  route: {
    params: {cycleId, screenTitle},
  },
}: Navigation<Screens.PERFORMANCE_REVIEW_DELIVER_RESULTS>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {reviewsToShare, isLoading, isRefreshing, refetch} =
    useGetPerformanceCycle(cycleId);

  const onItemPress = useCallback(
    (item: PerformanceReview) => {
      navigation.navigate(Screens.PERFORMANCE_REVIEW_FORM, {
        cycleId: item.cycleId,
        reviewId: item.id,
        shareable: true,
        showOptions: false,
      });
    },
    [navigation],
  );

  const renderItem: ListRenderItem<PerformanceReview> = useCallback(
    ({item}) => <ReviewRowItem review={item} onPress={onItemPress} />,
    [onItemPress],
  );

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

  return (
    <List
      data={reviewsToShare}
      renderItem={renderItem}
      style={styles.content}
      ListHeaderComponent={
        reviewsToShare?.length ? (
          <Title title={t('general.collaborators')} />
        ) : null
      }
      ListEmptyComponent={
        isLoading ? <PerformanceListSK withDescription={false} /> : null
      }
      backgroundColor={theme.background.layout.default}
      isRefreshing={isRefreshing}
      onRefresh={refetch}
      IconEmptyList={<Avatar Icon={IconCheck} size="lg" variant="success" />}
      titleEmptyList={t('performance.form.share_completed')}
    />
  );
}

export default DeliverResultsScreen;