import React from 'react';
import {FlatList, ListRenderItem} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Skeleton, Title} from '@components';
import {useInfiniteQuery} from '@hooks/queries/useInfiniteQuery';
import {
  EVENTS_AMPLITUDE_TAB_MAPPER,
  EVENTS_QUERY_KEYS,
} from '@modules/events/constants';
import {EventInvitationStatus, WorkEvent} from '@modules/events/interfaces';
import {getEvents} from '@modules/events/services';
import {NO_PAGINATION_LIMIT} from '@services/constants';
import {useTheme} from '@shared/theme';

import EventItemSk from '../EventItemSk';
import EmptyList from '../EmptyList';
import EventItem from '../EventItem';

import {styles} from './styles';

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

const renderItem: ListRenderItem<WorkEvent> = ({item}) => (
  <EventItem
    showInvitation
    showShortDate
    event={item}
    source={EVENTS_AMPLITUDE_TAB_MAPPER.InvitationsEvents}
  />
);

function PendingEventsList() {
  const {spacing} = useTheme();
  const {t} = useTranslation();
  const {data, isLoading} = useInfiniteQuery(
    EVENTS_QUERY_KEYS.pendingInvitationEvents,
    params =>
      getEvents({
        ...params,
        invitationStatus: [EventInvitationStatus.Pending].toString(),
        limit: NO_PAGINATION_LIMIT,
      }),
  );

  return (
    <FlatList
      bounces={false}
      data={data}
      keyExtractor={keyExtractor}
      ListEmptyComponent={
        isLoading ? (
          <EventItemSk />
        ) : (
          <EmptyList emptyTitle={t('events.no_peding_events')} />
        )
      }
      ListHeaderComponent={
        isLoading ? (
          <Skeleton>
            <Skeleton.Item
              width="75%"
              height={spacing.x3}
              style={styles.title}
            />
          </Skeleton>
        ) : (
          <Title title={t('events.pending_events')} style={styles.title} />
        )
      }
      renderItem={renderItem}
      showsVerticalScrollIndicator={false}
      style={styles.container}
    />
  );
}

export default PendingEventsList;