import React, {useEffect, useMemo, useState} from 'react';
import {ListRenderItem, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {IconZoomExclamation} from '@tabler/icons-react-native';
import {Avatar, InputSearch, List, Title} from '@components';
import {Language} from '@config/i18n';
import {useInfiniteQuery} from '@hooks/queries-v5/useInfiniteQuery';
import {useDebounce} from '@hooks/useDebounce';
import {Navigation} from '@interfaces/navigation';
import {KnowledgeLibrariesSK} from '@modules/libraries/skeletons/KnowledgeLibrariesSk';
import {
  useLibrariesListeners,
  useWelcomeConfig,
} from '@modules/libraries/hooks';
import {
  KnowledgeLibraryListItem,
  LibraryStatus,
} from '@modules/libraries/interfaces';
import {librariesQueryKeys} from '@modules/libraries/constants';
import {getKnowledgeLibraries} from '@modules/libraries/services';
import {useAppSelector} from '@redux/utils';
import {usePermissions} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';
import {getScreenString} from '@shared/strings';
import {capitalize} from '@shared/utils';
import {useFeatureFlag} from '@stores/featureFlags';

import {styles} from './styles';
import LibraryItem from './components/LibraryItem';
import {WelcomeHeader} from './components/WelcomeHeader';

export function KnowledgeLibraries({
  navigation,
}: Navigation<Screens.KNOWLEDGE_LIBRARIES>) {
  const {VIEW_TABBAR_KNOWLEDGE_LIBRARIES} = usePermissions();
  const {top: paddingTop, bottom: paddingBottom} = useSafeAreaInsets();
  const {t, i18n} = useTranslation();
  const {theme} = useTheme();
  const isV2 = useFeatureFlag('VIEW_KNOWLEDGE_LIBRARIES_V2');
  const moduleName = useAppSelector(
    ({instance}) =>
      instance.moduleNames?.[i18n.language as Language]?.KNOWLEDGE_LIBRARIES,
  );
  const [searchText, setSearchText] = useState('');
  const debounceSearch = useDebounce(searchText, 300);

  const {data: welcomeConfig, isLoading: isWelcomeConfigLoading} =
    useWelcomeConfig();

  const formattedModuleName = useMemo(
    () =>
      capitalize(moduleName, false) ||
      t(getScreenString(Screens.KNOWLEDGE_LIBRARIES)),
    [moduleName, t],
  );

  const navigationTitle = useMemo(
    () =>
      isV2 && welcomeConfig?.title ? welcomeConfig.title : formattedModuleName,
    [isV2, welcomeConfig?.title, formattedModuleName],
  );

  useEffect(() => {
    navigation.setOptions({title: navigationTitle});
  }, [navigation, navigationTitle]);

  const {
    data: allLibraries = [],
    isLoading,
    isError,
    isFetchingNextPage,
    refresh,
    hasNextPage,
    getNextPage,
    isRefreshing,
  } = useInfiniteQuery<KnowledgeLibraryListItem>(
    librariesQueryKeys.knowledgeLibraries(debounceSearch),
    params => getKnowledgeLibraries({...params, q: debounceSearch}),
  );

  const libraries = useMemo(
    () => allLibraries.filter(item => item.status === LibraryStatus.ENABLED),
    [allLibraries],
  );

  useLibrariesListeners();

  const renderItem: ListRenderItem<KnowledgeLibraryListItem> = ({item}) => (
    <LibraryItem data={item} />
  );

  const listHeaderComponent = (
    <View>
      {isV2 && (
        <>
          <View style={styles.listHeaderWelcomeBleed}>
            <WelcomeHeader
              isLoading={isWelcomeConfigLoading}
              data={welcomeConfig}
              moduleName={formattedModuleName}
            />
          </View>
          <Title title={t('libraries.your_articles')} style={styles.title} />
        </>
      )}
      <InputSearch
        value={searchText}
        placeholder={t('libraries.search_libraries')}
        onChangeText={setSearchText}
      />
    </View>
  );

  return (
    <View
      style={[
        styles.flex,
        {backgroundColor: theme.background.layout.default},
        VIEW_TABBAR_KNOWLEDGE_LIBRARIES && {paddingTop},
      ]}>
      <List
        data={libraries}
        renderItem={renderItem}
        style={[
          styles.content,
          !isV2 && styles.v1Content,
          {backgroundColor: theme.background.layout.default, paddingBottom},
        ]}
        keyboardDismissMode="on-drag"
        keyboardShouldPersistTaps="handled"
        hasNextPage={hasNextPage}
        onNextPage={getNextPage}
        onRefresh={refresh}
        isFetchingNextPage={isFetchingNextPage}
        isRefreshing={isRefreshing}
        titleEmptyList={t('general.empty_search_result')}
        descriptionEmptyList={t('general.empty_search_description')}
        IconEmptyList={
          <Avatar Icon={IconZoomExclamation} variant="primary" size="lg" />
        }
        ListEmptyComponent={isLoading ? <KnowledgeLibrariesSK /> : null}
        ListHeaderComponent={listHeaderComponent}
        isLoading={isLoading}
        isError={isError}
      />
    </View>
  );
}