import React, {ReactNode, useCallback} from 'react';
import {FlatList, ListRenderItem, View} from 'react-native';
import {Skeleton, Title} from '@components';
import {WorkEvent} from '@modules/events/interfaces';
import EventItemSk from '@modules/events/components/EventItemSk';
import {isSameDay} from '@shared/utils';
import {DEFAULT_THRESHOLD} from '@shared/constants';
import {useTheme} from '@shared/theme';

import EmptyList from '../EmptyList';
import EventItem from '../EventItem';
import {styles} from './styles';

const keyExtractor = (item: WorkEvent) => item.id.toString();

interface Props {
  data?: WorkEvent[];
  emptyTitle: string;
  emptyDescription?: string;
  getNextPage?: () => void;
  HeaderComponent?: ReactNode;
  isFetchingNextPage?: boolean;
  isLoading: boolean;
  showDateTitle?: boolean;
  showInvitation?: boolean;
  showShortDate?: boolean;
  title?: string;
  source: string;
}

function EventsList({
  data: events = [],
  emptyDescription,
  emptyTitle,
  getNextPage,
  HeaderComponent,
  isFetchingNextPage,
  isLoading = true,
  showDateTitle,
  showInvitation,
  showShortDate,
  title,
  source,
}: Props) {
  const {theme, spacing} = useTheme();

  const renderItem: ListRenderItem<WorkEvent> = useCallback(
    ({item, index}) => (
      <EventItem
        event={item}
        showDateTitle={
          showDateTitle &&
          (index === 0 ||
            !isSameDay(item.startDateTime, events[index - 1].startDateTime))
        }
        showInvitation={showInvitation}
        showShortDate={showShortDate}
        source={source}
      />
    ),
    [events, showDateTitle, showInvitation, showShortDate, source],
  );

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.elements.grey},
      ]}>
      <FlatList
        bounces={!!events.length}
        contentContainerStyle={styles.contentContainer}
        data={events}
        keyExtractor={keyExtractor}
        showsVerticalScrollIndicator={false}
        onEndReached={getNextPage}
        onEndReachedThreshold={DEFAULT_THRESHOLD}
        renderItem={renderItem}
        ListHeaderComponent={
          <>
            {HeaderComponent}
            {isLoading ? (
              <Skeleton>
                <Skeleton.Item
                  width="75%"
                  height={spacing.x3}
                  style={styles.title}
                />
              </Skeleton>
            ) : (
              title && <Title title={title} style={styles.title} />
            )}
          </>
        }
        ListEmptyComponent={
          isLoading ? (
            <View>
              <EventItemSk />
              <EventItemSk />
            </View>
          ) : (
            <EmptyList
              emptyTitle={emptyTitle}
              emptyDescription={emptyDescription}
            />
          )
        }
        ListFooterComponent={isFetchingNextPage ? <EventItemSk /> : null}
      />
    </View>
  );
}

export default EventsList;