import React from 'react';
import {useTranslation} from 'react-i18next';
import {IconMailOpened} from '@tabler/icons-react-native';
import {Dialog, ListItem} from '@components';
import {Notification} from '@modules/notificationsCenter/interfaces';
import {useNotificationsSettings} from '@modules/notificationsCenter/hooks';

import {styles} from './styles';

interface Props {
  data?: Nullable<Notification>;
  isVisible: boolean;
  onClose: () => void;
}

export function NotificationSettingsDialog({isVisible, onClose}: Props) {
  const {t} = useTranslation();
  const {markAllRead} = useNotificationsSettings();
  const onPressItem = () => {
    markAllRead();
    onClose();
  };

  return (
    <Dialog
      title={t('notifications_center.reading_options')}
      isVisible={isVisible}
      onClose={onClose}>
      <ListItem
        title={t('notifications_center.mark_all_read')}
        avatar={{Icon: IconMailOpened}}
        style={styles.itemList}
        onItemPress={onPressItem}
      />
    </Dialog>
  );
}