import React, {useLayoutEffect, useMemo} from 'react';
import {View, FlatList, ListRenderItem} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconNotification} from '@tabler/icons-react-native';
import {Title} from '@components';
import {Navigation} from '@interfaces/navigation';
import {useGetNotificationApps} from '@modules/notificationsCenter/hooks';
import {NotificationChannelsSK} from '@modules/notificationsCenter/skeletons/NotificationChannelsSK';
import NotificationsApp from '@modules/notificationsCenter/components/NotificationsApp';
import {NotificationApp} from '@modules/notificationsCenter/interfaces';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

const renderItem: ListRenderItem<NotificationApp> = ({item}) => (
  <NotificationsApp
    id={item.id}
    icon={item.icon || IconNotification}
    withBell={item.withBell}
    withPush={item.withPush}
  />
);

function NotificationsSettings({
  navigation,
}: Navigation<Screens.NOTIFICATIONS_SETTINGS>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {notificationModules, isLoadingNotificationApps} =
    useGetNotificationApps();

  useLayoutEffect(() => {
    navigation.setOptions({title: t('general.settings')});
  }, [navigation, t]);

  const HeaderComponent = useMemo(
    () => (
      <Title
        title={t('apps.notifications')}
        description={t(
          'notifications_center.notifications_modules_description',
        )}
        descriptionNumberOfLines={2}
      />
    ),
    [t],
  );

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      {isLoadingNotificationApps ? (
        <NotificationChannelsSK HeaderComponent={HeaderComponent} />
      ) : (
        notificationModules?.length > 0 && (
          <FlatList
            data={notificationModules}
            contentContainerStyle={styles.channelsContainer}
            renderItem={renderItem}
            ListHeaderComponent={HeaderComponent}
            showsVerticalScrollIndicator={false}
          />
        )
      )}
    </View>
  );
}

export default NotificationsSettings;