// signin-widget-react.jsx
// Drop-in "Sign in with European Digital Identity Wallet" React component.
// Wraps the useEudiVerifier hook (see /downloads/eu-wallet/verifier-react-hook.jsx).
// (c) Aloaha Limited.

import React, { useEffect } from 'react';
import { useEudiVerifier } from './verifier-react-hook.jsx';

export function EudiSignInButton({ query, onSuccess, onError, children }) {
  const { session, status, claims, error, start, cancel } = useEudiVerifier({
    query: query || 'pid-minimal',
    onSuccess: onSuccess,
    onError: onError
  });

  useEffect(function () {
    return function () { cancel(); };
  }, []);

  if (status === 'waiting' && session) {
    const qr =
      'https://api.qrserver.com/v1/create-qr-code/?size=260x260&data=' +
      encodeURIComponent(session.deep_link);
    return (
      <div className="eudi-signin eudi-signin--waiting">
        <img alt="EUDI Wallet QR" src={qr} width={260} height={260}/>
        <p>
          <a href={session.deep_link}>Open in European Digital Identity Wallet</a>
        </p>
        <button type="button" onClick={cancel}>Cancel</button>
      </div>
    );
  }

  if (status === 'completed') {
    return <div className="eudi-signin eudi-signin--done">Signed in.</div>;
  }

  if (status === 'error' || status === 'expired') {
    return (
      <div className="eudi-signin eudi-signin--error">
        <p>Sign-in failed: {status}{error ? ' - ' + String(error.message || error) : ''}</p>
        <button type="button" onClick={start}>Try again</button>
      </div>
    );
  }

  return (
    <button type="button" className="eudi-signin__button" onClick={start}>
      {children || 'Sign in with European Digital Identity Wallet'}
    </button>
  );
}