import React from 'react'
import { Provider } from 'react-redux'
import { MemoryRouter, Navigate, Route, Routes } from 'react-router-dom'

import { Header } from './components/Header'
import { store } from './store'
import { createClient } from './client'
import { AppFrame } from './style'
import { EventExplorer } from './components/EventExplorer'
import { UserDetails } from './components/UserDetails'
import { Telemetry } from './components/Telemetry'
import { DiagnosticsView } from './components/DiagnosticsView'


export * from './types/core'
export * from './types/event'
export * from './types/user'
export * from './types/diagnostics'

export const inspector = createClient(store)

export type InspectorShellProps = {
  /**
   * By default, the inspector will land on the events explorer page. However,
   * it is possible to first land on an alternative view instead:
   * - user: Check if the user has been identified, and explore their traits
   * - diagnostics: View details around integrations, plugins, intialization errors, etc.
   */
  landingPage?: 'events' | 'user' | 'diagnostics'
}

export const InspectorShell = ({ landingPage = 'events' }: InspectorShellProps) => {
  return (
    <Provider store={store}>
      <MemoryRouter initialEntries={[`/${landingPage}`]}>
        <AppFrame>
          <Header />
          <Routes>
            <Route path='/user' element={<UserDetails />} />
            <Route path='/diagnostics' element={<DiagnosticsView />} />
            <Route path='/events' element={<EventExplorer />} />
            <Route path='*' element={<Navigate to='/events' replace />} />
          </Routes>
        </AppFrame>
        <Telemetry />
      </MemoryRouter>
    </Provider>
  )
}