import { useState } from 'react';
import { useStytch } from '@stytch/react';

export const OAuthAuthorizeSubmit = () => {
  const stytch = useStytch();
  const [loading, setLoading] = useState(false);
  const [result] = useState(null);

  const submitOAuthAuthorization = async () => {
    setLoading(true);
    try {
      const response = await stytch.idp.oauthAuthorizeSubmit({
        client_id: '${exampleConnectedAppClientID}',
        redirect_uri: 'https://example.com/callback',
        response_type: 'code',
        scopes: ['openid', 'profile', 'email'],
        prompt: 'consent',
        state: 'example-state',
        nonce: 'example-nonce',
        code_challenge: 'example-code-challenge',
        consent_granted: true,
      });

      // Redirect to the returned redirect URI
      if (response.redirect_uri) {
        window.location.href = response.redirect_uri;
      }
    } catch (error) {
      console.error('Error submitting OAuth authorization:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={submitOAuthAuthorization} disabled={loading}>
        {loading ? 'Submitting Authorization...' : 'Submit OAuth Authorization'}
      </button>
      {result && (
        <div>
          <h3>Authorization Result:</h3>
          <pre>{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};