import {useCallback, useMemo, useState} from 'react';
import {ListRenderItem, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {ListItem, ListSkeleton, Menu, Typography} from '@components';
import {useDebounce} from '@hooks/useDebounce';
import {User} from '@interfaces/user';
import {getCompleteName} from '@shared/utils';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface UserDataListProps {
  users?: User[];
  isVisible: boolean;
  title: string;
  onClose: () => void;
  isPending: boolean;
}

function UserDataList({
  users,
  isVisible,
  title,
  onClose,
  isPending,
}: UserDataListProps) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const [filterText, setFilterText] = useState('');
  const debounceFilterText = useDebounce(filterText);
  const {spacing} = useTheme();

  const onItemPress = useCallback(
    (item: User) => () => {
      onClose();
      navigation.navigate(Screens.PROFILE, {userId: item.id});
    },
    [onClose, navigation],
  );

  const renderItem: ListRenderItem<User> = useCallback(
    ({item}) => (
      <ListItem
        title={getCompleteName(item)}
        avatar={{url: item.profilePicture, name: getCompleteName(item)}}
        onItemPress={onItemPress(item)}
        style={styles.withoutPadding}
      />
    ),
    [onItemPress],
  );

  const filteredUsers = useMemo(() => {
    return debounceFilterText.length
      ? users?.filter(user =>
          getCompleteName(user)
            .toLowerCase()
            .includes(debounceFilterText.toLowerCase()),
        )
      : users || [];
  }, [users, debounceFilterText]);
  const shouldShowFilter = useMemo(() => (users?.length || 0) > 3, [users]);

  return (
    <Menu
      data={filteredUsers}
      renderItem={renderItem}
      isVisible={isVisible}
      onClose={onClose}
      filterable={shouldShowFilter}
      title={title}
      titleNumberOfLines={2}
      searchPlaceholder={t('general.search')}
      onFilterText={setFilterText}
      extraPadding={spacing['x2.5']}
      ListEmptyComponent={
        isPending ? (
          <ListSkeleton presentation="flat" itemLength={3} />
        ) : undefined
      }
      ListHeaderComponent={
        <View style={styles.headerContainer}>
          <Typography>
            <Typography weight="semiBold">
              {`${filteredUsers?.length || 0} `}
            </Typography>
            {t('profile.total_users')}
          </Typography>
        </View>
      }
    />
  );
}

export default UserDataList;