import React, {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {IconCircleX} from '@tabler/icons-react-native';
import {Dialog, ListRow} from '@components';
import {DraftPost} from '@modules/drafts/interfaces';

import CancelDraftDialog from '../CancelDraftDialog';

interface DraftOptionsDialogProps {
  onClose: () => void;
  draft: Nullable<DraftPost>;
}

function DraftOptionsDialog({onClose, draft}: DraftOptionsDialogProps) {
  const {t} = useTranslation();
  const [cancelDraftDialogOpen, setCancelDraftDialogOpen] =
    useState<Nullable<DraftPost>>(null);

  const onCloseCancelDraftDialog = () => {
    setCancelDraftDialogOpen(null);
  };
  const onCancelDraft = () => {
    const draftPost = draft;
    onClose();
    // waiting till the other modal hides to open the new one!
    setTimeout(() => setCancelDraftDialogOpen(draftPost), 600);
  };

  return (
    <>
      <Dialog
        onClose={onClose}
        isVisible={!!draft}
        title={t('general.options')}>
        <ListRow onPress={onCancelDraft}>
          <ListRow.Avatar Icon={IconCircleX} />
          <ListRow.Title title={t('drafts.main.cancel_post')} />
        </ListRow>
      </Dialog>
      <CancelDraftDialog
        draft={cancelDraftDialogOpen}
        onClose={onCloseCancelDraftDialog}
      />
    </>
  );
}

export default DraftOptionsDialog;