import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconInfoCircle} from '@tabler/icons-react-native';
import {
  BackButton,
  InputSearch,
  List,
  DismissKeyboard,
  Avatar,
} from '@components';
import {useDebounce} from '@hooks/useDebounce';
import {Navigation} from '@interfaces/navigation';
import {Instance} from '@interfaces/instance';
import {useGetCommunities} from '@modules/login/hooks/useGetCommunities';
import {Screens} from '@shared/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import CommunityCard from './components/CommunityCard';
import {CommunityListSk} from './components/CommunityListSk';

function Community({
  navigation,
  route: {
    params: {instances},
  },
}: Navigation<Screens.CHOOSE_COMMUNITY>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {bottom: marginBottom} = useSafeAreaInsets();
  const [searchValue, setSearchValue] = useState('');
  const debouncedValue = useDebounce(searchValue, 250);
  const {dataInstances, isSearching, onPressCommunity} =
    useGetCommunities(debouncedValue);

  const renderCommunity = useCallback(
    ({item}: {item: Instance}) => (
      <CommunityCard instance={item} onPress={onPressCommunity} />
    ),
    [onPressCommunity],
  );

  useEffect(() => {
    const headerLeft = () => <BackButton onPress={navigation.goBack} />;
    navigation.setOptions({
      headerLeft,
    });
  }, [navigation]);

  const memoStyles = useMemo(() => {
    return {
      container: [
        styles.container,
        {backgroundColor: theme.background.layout.tertiary},
      ],
      list: [
        styles.list,
        !dataInstances.length && styles.emptyList,
        {
          backgroundColor: dataInstances.length
            ? theme.background.layout.default
            : theme.background.layout.tertiary,
          marginBottom,
        },
      ],
    };
  }, [dataInstances.length, marginBottom, theme]);

  return (
    <DismissKeyboard style={memoStyles.container}>
      <View style={styles.innerContainer}>
        {instances.length > 4 && (
          <InputSearch
            onChangeText={setSearchValue}
            placeholder={t('authentication.search_community')}
            variant="disabled"
          />
        )}
        <List
          data={dataInstances}
          renderItem={renderCommunity}
          showsVerticalScrollIndicator={false}
          titleEmptyList={t('authentication.no_results')}
          descriptionEmptyList={t('authentication.no_results_description')}
          IconEmptyList={<Avatar Icon={IconInfoCircle} size="lg" />}
          ListEmptyComponent={isSearching ? <CommunityListSk /> : null}
          style={memoStyles.list}
          bounces={false}
          withRefresh={false}
          maxToRenderPerBatch={10}
          removeClippedSubviews={true}
          initialNumToRender={10}
          windowSize={7}
        />
      </View>
    </DismissKeyboard>
  );
}

export default Community;