import React, { useState } from 'react'
import { IdAndFaceValidation } from 'idmission-web-sdk'
 
function getSessionId() {
  return fetch('/api/get-session').then(resp => resp.json()).then(resp => resp.id)
}
 
function MyComponent() {
  const [running, setRunning] = useState(false)
 
  return (
    <>
      <button onClick={() => setRunning(true)}>Start ID and Face Validation</button>
 
      {running && (
        <IdAndFaceValidation
          sessionId={getSessionId}
          onApproved={(submissionResponse) => {
            alert('Your ID has been validated, proceed to the next checkpoint.')
          }}
          onDenied={(submissionResponse) => {
            alert('Your ID could not be validated, you shall not pass!')
          }}
        />
      )}
    </>
  )
}

function getSessionId() {
  return fetch('/api/get-session').then(resp => resp.json()).then(resp => resp.id)
}
 
IDmissionSDK.renderIdAndFaceValidation('#target-element', {
  sessionId: getSessionId,
  onApproved: (submissionResponse) => {
    alert('Your ID has been validated, proceed to the next checkpoint.')
  },
  onDenied: (submissionResponse) => {
    alert('Your ID could not be validated, you shall not pass!')
  },
})