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

const DraftConfirmationDialog = ({
  open,
  title,
  confirmationText,
  confirmButtonText,
  rejectButtonText,
  onReject,
  onConfirm,
  itemThumbnail,
}) => {
  const [saving, setSaving] = useState(false)
  const { rootElement } = useContext(RootDocumentContext)()

  const handleConfirm = () => {
    setSaving(true)
    if (onConfirm) {
      onConfirm()
    }
  }

  const handleReject = () => {
    if (onReject) {
      onReject()
    }
  }

  return (
    <Modal
      isOpen={open}
      toggle={handleReject}
      className="draft-confirmation-dialog"
      backdropClassName={saving ? 'draft-confirmation-dialog-backdrop' : ''}
      container={rootElement}
      role="dialog"
      aria-label={title}
    >
      <ModalHeader className="draft-confirmation-dialog-header">
        <div className="draft-confirmation-dialog-title">{title}</div>
        <button className="button button-transparent close-btn" onClick={handleReject} aria-label={t('General.Close')}>
          <Icon name="close_black.svg" width="14px" height="14px" ariaHidden="true" />
        </button>
      </ModalHeader>
      <ModalBody className="draft-confirmation-dialog-body">
        <div className="draft-confirmation-dialog-content">
          <div className="draft-confirmation-text">{confirmationText}</div>
          {itemThumbnail && (
            <div className="thumbnail-wrapper">
              <img
                src={itemThumbnail}
                alt=""
                className="draft-confirmation-thumbnail"
              />
            </div>
          )}
        </div>
        <div className="buttons-container">
          <ButtonAria
            className="button button-secondary confirmation-button"
            onClick={handleReject}
            text={rejectButtonText}
          />
          <ButtonAria
            className="button button-primary confirmation-button"
            onClick={handleConfirm}
            text={confirmButtonText}
          />
        </div>
      </ModalBody>
    </Modal>
  )
}

export default DraftConfirmationDialog

