import React, {memo, useCallback} from 'react';
import {ListRenderItem, StyleSheet, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconHash, IconX} from '@tabler/icons-react-native';
import {Typography, Button, List, ListItem, IconButton} from '@components';
import {useInfiniteQuery} from '@hooks/queries/useInfiniteQuery';
import {useGoBack} from '@hooks/useGoBack';
import {Topic} from '@interfaces/topics';
import {getTopicsQuery} from '@modules/chat/services';
import {TICKETS_QUERY_KEYS} from '@modules/chat/constants';
import {ICON_SIZES, SPACING} from '@shared/theme';

interface Props {
  onSelectTicket: (topic: Topic) => void;
  onCancel: () => void;
  canCreateChat: boolean;
}

const SelectTicketTab = ({onCancel, onSelectTicket, canCreateChat}: Props) => {
  const {t} = useTranslation();
  const {bottom} = useSafeAreaInsets();
  const {goBack} = useGoBack();

  const {
    data,
    isLoading,
    isError,
    getNextPage,
    isRefreshing,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery(TICKETS_QUERY_KEYS.topicList, ({page}) =>
    getTopicsQuery({page}),
  );
  const lastItemIndex = (data?.length || 0) - 1;

  const keyExtractor = useCallback((item: Topic) => item.id.toString(), []);

  const renderItem: ListRenderItem<Topic> = useCallback(
    ({item, index}) => {
      return (
        <ListItem
          title={item.name}
          avatar={{
            Icon: IconHash,
          }}
          withRightIcon
          onItemPress={() => onSelectTicket(item)}
          presentation="card"
          isFirstItem={index === 0}
          isLastItem={index === lastItemIndex}
        />
      );
    },
    [lastItemIndex, onSelectTicket],
  );

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        {canCreateChat ? (
          <Button
            variant="flat"
            text={t('general.cancel')}
            onPress={onCancel}
          />
        ) : (
          <View style={styles.headerLeft} />
        )}
        <Typography variant="m" weight="semiBold">
          {t('chats.select_ticket')}
        </Typography>
        {canCreateChat ? (
          <View style={styles.headerRight} />
        ) : (
          <IconButton Icon={IconX} onPress={goBack} variant="flat" />
        )}
      </View>
      <List
        presentation="card"
        data={data}
        isLoading={isLoading}
        isError={isError}
        isRefreshing={isRefreshing}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        onNextPage={getNextPage}
        hasNextPage={hasNextPage}
        isFetchingNextPage={isFetchingNextPage}
        style={[styles.list, {paddingBottom: bottom + SPACING.x2}]}
        paginationType="button"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {flex: 1},
  header: {
    padding: SPACING.x2,
    paddingTop: SPACING.x3,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  list: {paddingTop: SPACING.x2},
  headerRight: {width: SPACING.x9},
  headerLeft: {width: ICON_SIZES.x6},
});

export default memo(SelectTicketTab);