import React, {useContext} from 'react'
import { Modal, ModalBody } from 'reactstrap-wc'
import { t } from '$themelocalization'
import { Icon } from '$core-components'
import { RootDocumentContext } from '$themeservices'
import './RevertModificationDialog.scss'

const RevertModificationDialog = ({ closeDialog }) => {
  const {rootElement} = useContext(RootDocumentContext)()

  return (
    <Modal isOpen={true} className="cart-ng-revert-modification-dialog"
           modalClassName="cart-ng-revert-modification-dialog-container"
           backdropClassName="cart-ng-revert-modification-modal-backdrop"
           wrapClassName="cart-ng-revert-modification-progress-dialog-wrapper"
          container={rootElement}
           role="dialog" aria-label={t('Cart.OrderApprovalRevertMessage')} toggle={() => closeDialog()}>

      <button className="cart-ng-revert-modification-process-close" onClick={() => closeDialog()} aria-label={t('General.Close')}>
        <Icon name="close_black.svg" width="14px" height="14px" ariaHidden="true"/>
      </button>

      <ModalBody className="dialog-content">
        <div className="cart-ng-revert-modification-success" role="status" aria-live="polite">
          <Icon name="success.svg" height="30px" width="33px"
                wrapperClassName="cart-ng-revert-modification-success-icon" ariaHidden="true"/>
          <div className="dialog-text">
            {t('Cart.OrderApprovalRevertMessage')}
          </div>
        </div>
      </ModalBody>
    </Modal>
  )
}

export default RevertModificationDialog

