import React, {useCallback} from 'react';
import {useTranslation} from 'react-i18next';
import {IconMail, IconMailOpened} from '@tabler/icons-react-native';
import {Dialog, ListItem} from '@components';
import {COLORS} from '@shared/theme';

import {styles} from './styles';

interface Props {
  isRead: boolean;
  isVisible: boolean;
  onClose: () => void;
  onToggleReadNotification: ({isRead}: {isRead: boolean}) => void;
  onDelete?: () => void;
}

export function NotificationOptionsDialog({
  isRead,
  isVisible,
  onClose,
  onToggleReadNotification,
}: Props) {
  const {t} = useTranslation();

  const onItemPress = useCallback(() => {
    onToggleReadNotification({isRead: !isRead});
    onClose();
  }, [isRead, onClose, onToggleReadNotification]);

  return (
    <Dialog
      title={t('notifications_center.notifications_options')}
      isVisible={isVisible}
      onClose={onClose}>
      <ListItem
        backgroundColor={COLORS.transparent}
        title={t(
          `notifications_center.${isRead ? 'mark_unread' : 'mark_read'}`,
        )}
        avatar={{Icon: isRead ? IconMail : IconMailOpened}}
        style={styles.itemList}
        onItemPress={onItemPress}
      />
      {/* TODO: uncomment when back add EP to delete notification */}
      {/* <Divider />
      <ListItem
        title={t('notifications_center.delete_notification')}
        avatar={{Icon: IconTrash}}
        style={styles.itemList}
        onItemPress={onDelete}
      /> */}
    </Dialog>
  );
}