import React, { useEffect, useState } from 'react'

import Modal, { Action } from '../common/ModalComponent'

interface IDVerificationProps {
  message?: string | null;
  displayModal?: boolean;
  actions?: Action[];
  onClose?: () => void;
}

export const VerificationPendingModal = (props: IDVerificationProps) => {
  const { message, displayModal, actions, onClose } = props
  const [showModal, setShowModal] = useState(false)

  useEffect(() => {
    if (displayModal === undefined) {
      setShowModal(Boolean(message))
    }
  }, [message, displayModal])

  return showModal || displayModal ? (
    <div>
      <Modal
        modalClassName="id-verification-modal"
        actions={
          actions || [
            {
              id: 'okay',
              label: 'OK',
              variant: 'contained',
              onClick: () => {
                setShowModal(false)

                if (onClose) {
                  onClose()
                }
              },
            },
          ]
        }
      >
        <div>{message}</div>
      </Modal>
    </div>
  ) : null
}