import React, { useEffect, useState } from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import AppAuthHelper from  'appauthhelper';
import { Toolbar } from '@mui/material';

// Make the authorization request

export const AuthTest = () => {
    const [data, setData] = useState<any>(null);
    useEffect(() => {
        AppAuthHelper.init({
            clientId: 'warden.mobile',
            scopes: 'openid profile',
            'authorizationEndpoint': 'https://localhost:44320/provider/auth',
            'tokenEndpoint': 'https://localhost:44320/provider/token',
            'revocationEndpoint': 'https://localhost:44320/provider/token/revocation',

            tokensAvailableHandler: function (claims: any, id_token: any, interactively_logged_in: any) {
                const data = { claims, id_token, interactively_logged_in };
                // eslint-disable-next-line no-console
                console.log('>>>>>>>>>>>>>>>>>>>>>>>>>', data);
                setData(data);
            },
            renewCooldownPeriod: 1,
            oidc: true,
            identityProxyPreference: 'serviceWorker', // Can be either "XHR" or "serviceWorker"
            renewStrategy: 'authCode', // Can be either "authCode" or "refreshToken"
            redirectUri: 'appAuthHelperRedirect.html', // Can be a relative or absolute url
            serviceWorkerUri: 'appAuthServiceWorker.js' // Can be a relative or absolute url
        }).then(() => {
            AppAuthHelper.getTokens();
        });
    }, []);
    return (
        <div>
            <button onClick={() => {
                AppAuthHelper.getTokens();
            }}>Login</button>
            { JSON.stringify(data, null, 2)}
            <button onClick={() => {
                setData(null);
                AppAuthHelper.logout();
            }}>Logout</button>
        </div>
    );
};