import React, {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {IconSpeakerphone} from '@tabler/icons-react-native';
import {Dialog, ListRow} from '@components';
import {Post} from '@modules/post/interfaces';

import RemoveKeyUpdateDialog from '../RemoveKeyUpdateDialog';

interface Props {
  onClose: () => void;
  open: boolean;
  post: Post;
  unreads: boolean;
  goBackOnDelete?: boolean;
}

function KeyUpdateOptionsDialog({
  onClose,
  open,
  post,
  unreads,
  goBackOnDelete = false,
}: Props) {
  const {t} = useTranslation();
  const [removeKeyUpdateDialogOpen, setRemoveKeyUpdateDialogOpen] =
    useState<Nullable<Post>>(null);

  const onCloseRemoveKeyUpdateDialog = () => {
    setRemoveKeyUpdateDialogOpen(null);
  };
  const onRemoveKeyUpdate = () => {
    const keyUpdatePost = post;
    onClose();
    // waiting till the other modal hides to open the new one!
    setTimeout(() => setRemoveKeyUpdateDialogOpen(keyUpdatePost), 600);
  };

  return (
    <>
      <Dialog onClose={onClose} isVisible={open} title={t('general.options')}>
        <ListRow onPress={onRemoveKeyUpdate}>
          <ListRow.Avatar Icon={IconSpeakerphone} />
          <ListRow.Title title={t('post.unmark_as_key_update')} />
        </ListRow>
      </Dialog>
      <RemoveKeyUpdateDialog
        unreads={unreads}
        post={removeKeyUpdateDialogOpen}
        onClose={onCloseRemoveKeyUpdateDialog}
        goBackOnDelete={goBackOnDelete}
      />
    </>
  );
}

export default KeyUpdateOptionsDialog;