import React, {useLayoutEffect} from 'react';
import {View} 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 NotificationChannelItem from '@modules/notificationsCenter/components/NotificationChannelItem';
import {useGetNotificationChannels} from '@modules/notificationsCenter/hooks';
import {NotificationAppId} from '@modules/notificationsCenter/interfaces';
import NotificationEmailItem from '@modules/notificationsCenter/components/NotificationEmailItem';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

function NotificationChannels({
  navigation,
  route: {
    params: {moduleId, withBell, withPush, moduleName},
  },
}: Navigation<Screens.NOTIFICATION_CHANNELS>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {notificationChannels} = useGetNotificationChannels({
    withBell,
    withPush,
  });

  useLayoutEffect(() => {
    navigation.setOptions({title: moduleName});
  }, [moduleName, navigation]);

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <Title
        title={t('notifications_center.notification_channels.title')}
        description={t(
          'notifications_center.notification_channels.description',
        )}
        descriptionNumberOfLines={2}
      />
      <View style={styles.channelsContainer}>
        {notificationChannels?.map(({id, title, description, Icon, value}) =>
          id ? (
            <NotificationChannelItem
              key={`${id}-${value}`}
              id={id}
              title={t(title || '')}
              description={t(description || '')}
              Icon={Icon || IconNotification}
              value={value ?? false}
              moduleCode={moduleId}
            />
          ) : null,
        )}
        {moduleId === NotificationAppId.FEED && <NotificationEmailItem />}
      </View>
    </View>
  );
}

export default NotificationChannels;