import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

import Dialog from '../Dialog';
import Button from '../Button';
import useKeyPress from '../../hooks/useKeyPress';

import { TextWrapper, BtnWrapper } from './styled';

type Props = {
  onCancel: () => void;
  onDelete: () => void;
};

const index: React.FC<Props> = ({ onCancel, onDelete }: Props) => {
  const { t } = useTranslation('dialog');
  const enterKeyPress = useKeyPress('Enter');
  const escKeyPress = useKeyPress('Escape');

  useEffect(() => {
    if (enterKeyPress) {
      onDelete();
    }
    if (escKeyPress) {
      onCancel();
    }
  }, [enterKeyPress, escKeyPress]);

  return (
    <Dialog open>
      <TextWrapper>{t('deleteAnnotationAlert')}</TextWrapper>
      <BtnWrapper>
        <Button appearance="default-hollow" onClick={onCancel}>
          {t('cancel')}
        </Button>
        <Button
          appearance="primary"
          onClick={onDelete}
          style={{ marginLeft: '16px' }}
        >
          {t('continue')}
        </Button>
      </BtnWrapper>
    </Dialog>
  );
};

export default index;