import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { PublicClientApplication } from '@azure/msal-browser'
import { MsalProvider } from '@azure/msal-react'
import { tenantContextFromMsalAccount } from '@foritllc/auth/browser'
import { TenantThemeProvider } from '@foritllc/tenant-theme/react'
import { msalConfig } from '@shared/authConfig'
import App from './App'
import { resolveTenantTheme } from './lib/tenantTheme'

import './index.css'

const msalInstance = new PublicClientApplication(msalConfig)

function render() {
  const account = msalInstance.getActiveAccount() || msalInstance.getAllAccounts()[0]
  const ctx = tenantContextFromMsalAccount(account, window.location.hostname)
  const theme = resolveTenantTheme(ctx)

  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <MsalProvider instance={msalInstance}>
        <TenantThemeProvider theme={theme}>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </TenantThemeProvider>
      </MsalProvider>
    </React.StrictMode>
  )
}

msalInstance.initialize()
  .then(() => msalInstance.handleRedirectPromise())
  .then((response) => {
    if (response?.account) msalInstance.setActiveAccount(response.account)
    else {
      const accounts = msalInstance.getAllAccounts()
      if (accounts.length > 0) msalInstance.setActiveAccount(accounts[0])
    }
    msalInstance.addEventCallback((event: any) => {
      if (event.eventType === 'msal:loginSuccess' && event.payload?.account) {
        msalInstance.setActiveAccount(event.payload.account)
      }
    })
    render()
  })
  .catch(() => render())