import React from 'react';
import {useTranslation} from 'react-i18next';
import AcceptCancelDialog from '@components/AcceptCancelDialog';
import {SHARED_STRINGS} from '@shared/strings';

import {styles} from './styles';

interface Props {
  errorMessage: Nullable<string>;
  handleTouchOutside: () => void;
  cancelAckModal: boolean;
  goBackAccept: () => void;
}

function PublishPostDialogs({
  errorMessage,
  handleTouchOutside,
  cancelAckModal,
  goBackAccept,
}: Props) {
  const {t} = useTranslation();
  return (
    <>
      <AcceptCancelDialog
        visible={!!errorMessage}
        onTouchOutside={handleTouchOutside}
        onAccept={handleTouchOutside}
        title={t(SHARED_STRINGS.ERROR)}
        text={errorMessage}
      />
      <AcceptCancelDialog
        visible={cancelAckModal}
        onTouchOutside={handleTouchOutside}
        onAccept={goBackAccept}
        title={t(SHARED_STRINGS.DISCARD_CHANGES)}
        text={t(SHARED_STRINGS.DISCARD_CHANGES_DESCRIPTION)}
        acceptText={t(SHARED_STRINGS.DISCARD)}
        cancelText={t(SHARED_STRINGS.KEEP_EDITING)}
        cancelTextStyle={styles.cancelTextStyle}
        showCancel
      />
    </>
  );
}

export default PublishPostDialogs;
