import { configureMsal, AuthProviderState } from 'msal-react-v2/lib/AuthProvider'

enum Scopes {
  OPEN_ID = 'openid',
  CUSTOM_SCOPE = 'api://XXXX-XXXX-XXXXXX-XXXXX/all',
  USER_READ = 'User.Read',
}

const config = {
  auth: {
    clientId: 'XXXXXX-XXXXXX-XXXXXX-XXXXX-XXXXX', // clientId or appId
    redirectUri: 'http://localhost:3000',         // redirectUri
    authority: undefined,                         // Optional
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: true,
  },
}

const {
  AuthProvider,   // Use once!
  getAccessToken, // Can use to inject access tokens elsewhere in your app
  msalClient,     // Use elsewhere for msalClient.logout() and other client functions
  graphClient,    // Use for graph client api calls
  useAccount,     // React Hook to give access to account info in child components
} = configureMsal({
  config,                                                // Required
  msalScopes: [Scopes.OPEN_ID, Scopes.CUSTOM_SCOPE],     // Optional (But Recommended)
  graphClientScopes: [                                   // Optional (But Recommended
    Scopes.USER_READ,
  ],
})

// I recommend having all the above ^^ in a separate MsalConfig.ts file

const App = () => (
  <AuthProvider
    render={({ state, account }) =>
      state === AuthProviderState.Success ? (
        <div>Logged in as {account.username} </div>
      ) : (
        <div>Loading..</div>
      )
    }
  />
);