import React, {useLayoutEffect, useState} from 'react';
import {ListRenderItem, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  IconBellRinging,
  IconExclamationCircle,
  IconMailOpened,
  IconSettings,
} from '@tabler/icons-react-native';
import {
  Avatar,
  HorizontalButtonGroup,
  Divider,
  IconButton,
  List,
  ListSkeleton,
} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {useCursorInfinityQuery} from '@hooks/queries-v5/useCursorInfinityQuery';
import {Navigation} from '@interfaces/navigation';
import {Notification} from '@modules/notificationsCenter/interfaces';
import {NotificationSettingsDialog} from '@modules/notificationsCenter/components';
import {NOTIFICATIONS_QUERY_KEYS} from '@modules/notificationsCenter/constants';
import {getNotifications} from '@modules/notificationsCenter/services';
import NotificationItem from '@modules/notificationsCenter/components/NotificationItem';
import {useNotificationsListener} from '@modules/notificationsCenter/hooks';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

const keyExtractor = (item: Notification) => item.id;

function NotificationsList({navigation}: Navigation) {
  const {t} = useTranslation();
  const [selected, setSelected] = useState(1);
  const [readDialogIsVisible, setReadDialogIsVisible] = useState(false);
  const {theme} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding();
  const isRead = selected === 1 ? undefined : false;
  const onCloseReadDialog = () => setReadDialogIsVisible(false);

  const renderItem: ListRenderItem<Notification> = ({item}) => (
    <NotificationItem item={item} listIsRead={isRead} />
  );

  const {
    data,
    isLoading,
    getNextPage,
    hasNextPage,
    refresh,
    isRefreshing,
    isFetchingNextPage,
    isError,
  } = useCursorInfinityQuery<Notification>({
    queryKey: NOTIFICATIONS_QUERY_KEYS.notifications(isRead),
    queryFn: params => getNotifications({isRead, ...params}),
  });

  useNotificationsListener(isRead);

  const onPressHeaderRead = () => setReadDialogIsVisible(true);

  useLayoutEffect(() => {
    const headerRight = () => (
      <View style={styles.headerRightContainer}>
        <IconButton
          Icon={IconMailOpened}
          variant="tertiary"
          onPress={onPressHeaderRead}
        />
        <IconButton
          Icon={IconSettings}
          variant="tertiary"
          onPress={() => navigation.navigate(Screens.NOTIFICATIONS_SETTINGS)}
        />
      </View>
    );
    navigation.setOptions({headerRight});
  }, [navigation]);

  const OPTIONS = [
    {id: 1, label: t('notifications_center.all')},
    {id: 2, label: t('notifications_center.unread')},
  ];

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.tertiary},
      ]}>
      <View style={styles.buttonGroupContainer}>
        <HorizontalButtonGroup
          options={OPTIONS}
          selected={selected}
          onChange={setSelected}
          withTick={false}
        />
      </View>
      <Divider />
      <List
        renderItem={renderItem}
        data={data}
        isLoading={isLoading}
        hasNextPage={hasNextPage}
        onNextPage={getNextPage}
        onRefresh={refresh}
        isRefreshing={isRefreshing}
        style={[styles.listContainer, {paddingBottom}]}
        isFetchingNextPage={isFetchingNextPage}
        keyExtractor={keyExtractor}
        FetchingNextPageLoader={<ListSkeleton presentation="flat" />}
        IconEmptyList={
          <Avatar
            size="lg"
            Icon={isError ? IconExclamationCircle : IconBellRinging}
            variant={isError ? 'error' : 'primary'}
          />
        }
        titleEmptyList={t(
          `notifications_center.${
            isError ? 'error_message_title' : 'without_notifications_title'
          }`,
        )}
        descriptionEmptyList={t(
          `notifications_center.${
            isError
              ? 'error_message_description'
              : 'without_notifications_description'
          }`,
        )}
      />
      <NotificationSettingsDialog
        isVisible={readDialogIsVisible}
        onClose={onCloseReadDialog}
      />
    </View>
  );
}

export default NotificationsList;