import React, {useCallback, useMemo, ReactElement} from 'react';
import {ListRenderItem, SectionList, SectionListData} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {Title, RefreshControl} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {PerformanceReviewsListSK} from '@modules/performance/skeletons/PerformanceReviewsListSK';
import {ReviewRowItem} from '@modules/performance/components/ReviewRowItem';
import {
  PerformanceReview,
  PerformanceReviewSection,
} from '@modules/performance/interfaces';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface ReviewsTabProps {
  isLoading: boolean;
  isRefreshing: boolean;
  refetch: () => void;
  sectionData: SectionListData<PerformanceReview, PerformanceReviewSection>[];
  ListEmptyComponent?: ReactElement;
  customRenderItem?: ListRenderItem<PerformanceReview>;
  ListHeaderComponent?: Nullable<ReactElement>;
}

const keyExtractor = (item: PerformanceReview) => `${item.id}`;

const renderSectionHeader = ({
  section: {title, data},
}: {
  section: SectionListData<PerformanceReview, PerformanceReviewSection>;
}) =>
  data.length ? (
    <Title size="s" title={title} style={styles.sectionHeader} />
  ) : null;

export function ReviewsTab({
  isLoading,
  isRefreshing,
  refetch,
  sectionData,
  ListEmptyComponent,
  customRenderItem,
  ListHeaderComponent,
}: ReviewsTabProps) {
  const navigation = useNavigation();
  const {theme, spacing} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding({
    extra: spacing.x13,
  });
  const onItemPress = useCallback(
    (item: PerformanceReview) => {
      navigation.navigate(Screens.PERFORMANCE_REVIEW_FORM, {
        cycleId: item.cycleId,
        reviewId: item.id,
        shareable: false,
        showOptions: true,
      });
    },
    [navigation],
  );

  const sections = useMemo(
    () => sectionData.filter(section => section.data.length > 0),
    [sectionData],
  );

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

  return (
    <SectionList
      sections={sections}
      renderItem={customRenderItem || renderItem}
      keyExtractor={keyExtractor}
      renderSectionHeader={renderSectionHeader}
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}
      contentContainerStyle={[styles.content, {paddingBottom}]}
      ListEmptyComponent={
        isLoading ? <PerformanceReviewsListSK /> : ListEmptyComponent
      }
      refreshControl={
        <RefreshControl refreshing={isRefreshing} onRefresh={refetch} />
      }
      stickySectionHeadersEnabled={false}
      ListHeaderComponent={ListHeaderComponent}
    />
  );
}