import React, {useCallback} from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import {BottomSheetFlatList} from '@gorhom/bottom-sheet';

import {MentionAllItem} from './components/MentionAllItem/MentionAllItem';
import {
  MentionSuggestionUserItem,
  MentionSuggestionUserItemData,
} from './components/MentionSuggestionUserItem/MentionSuggestionUserItem';

type ItemId = string | number;

interface Props<T extends MentionSuggestionUserItemData> {
  data: T[];
  keyExtractor?: (item: T) => string;
  getItemLayout: (
    _data: unknown,
    index: number,
  ) => {
    length: number;
    offset: number;
    index: number;
  };
  pageSize?: number;
  onEndReached?: () => void;
  contentContainerStyle?: StyleProp<ViewStyle>;
  onItemPress: (item: T) => void;
  withAllMention?: boolean;
  allMentionId?: ItemId;
  allMentionLabel?: string;
  isAccessible?: boolean;
  allMentionItemStyle?: StyleProp<ViewStyle>;
  allMentionItemContentStyle?: StyleProp<ViewStyle>;
  listItemStyle?: StyleProp<ViewStyle>;
}

export const MentionBottomSheetFlatList = <
  T extends MentionSuggestionUserItemData,
>({
  data,
  keyExtractor,
  getItemLayout,
  pageSize = 30,
  onEndReached,
  contentContainerStyle,
  onItemPress,
  withAllMention = false,
  allMentionId,
  allMentionLabel,
  allMentionItemStyle,
  allMentionItemContentStyle,
  listItemStyle,
  isAccessible = true,
}: Props<T>) => {
  const onPressItem = useCallback(
    (item: T) => () => {
      onItemPress(item);
    },
    [onItemPress],
  );

  const renderItem = useCallback(
    ({item}: {item: T}) => {
      const isMentionAllItem =
        withAllMention &&
        allMentionId !== undefined &&
        item.id === allMentionId;

      if (isMentionAllItem) {
        return (
          <MentionAllItem
            label={allMentionLabel ?? ''}
            onPress={onPressItem(item)}
            style={allMentionItemStyle}
            contentStyle={allMentionItemContentStyle}
          />
        );
      }

      return (
        <MentionSuggestionUserItem
          item={item}
          onPress={onPressItem(item)}
          style={listItemStyle}
        />
      );
    },
    [
      allMentionId,
      allMentionItemContentStyle,
      allMentionItemStyle,
      allMentionLabel,
      listItemStyle,
      onPressItem,
      withAllMention,
    ],
  );

  const defaultKeyExtractor = useCallback((item: T) => item.id.toString(), []);

  return (
    <BottomSheetFlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor ?? defaultKeyExtractor}
      overScrollMode="never"
      scrollToOverflowEnabled={true}
      showsVerticalScrollIndicator={false}
      getItemLayout={getItemLayout}
      keyboardShouldPersistTaps="always"
      maxToRenderPerBatch={30}
      initialNumToRender={pageSize}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      bounces={false}
      alwaysBounceVertical={false}
      contentContainerStyle={contentContainerStyle}
      accessible={isAccessible}
    />
  );
};

export * from './components/MentionAllItem/MentionAllItem';
export * from './components/MentionSuggestionUserItem/MentionSuggestionUserItem';