// index.tsx
import React from 'react'
import {render} from 'react-dom'
import MyHeader from './app'

const PageRenderer = (): React.ReactElement => {
  /**
   * This is a simple example of listening to the hash change event that occurs when the user clicks around in the content rendered by ExplorePage.
   */
  const [route, setRoute] = useState(window.location.hash.slice(1) ?? '/')

  useEffect(() => {
    const onHashChange = (): void => { setRoute(window.location.hash.slice(1) ?? '/') }
    window.addEventListener('hashchange', onHashChange)
    return () => { window.removeEventListener('hashchange', onHashChange) }
  }, [])

  const RenderPage: React.FC = () => {
    switch (true) {
      case route.startsWith('/explore'):
        return <ExplorePage />
      case route === '/':
      default:
        return <StartExploringPage />
    }
  }

  return (
    <RenderPage />
  )
}
const App = (): React.ReactElement => {
  return (
    <HeliaProvider>
      <ExploreProvider>
        <MyHeader />
        <PageRenderer />
      </ExploreProvider>
    </HeliaProvider>
  )
}

const rootEl = document.getElementById('root')
if (rootEl == null) {
  throw new Error('No root element found with the id "root"')
}
const root = createRoot(rootEl)
root.render(
  <I18nextProvider i18n={i18n}>
    <App />
  </I18nextProvider>
)

import { HeliaProvider, ExploreProvider } from 'ipld-explorer-components/providers'
import { StartExploringPage, ExplorePage } from 'ipld-explorer-components/pages'
import { IpldExploreForm, IpldCarExploreForm } from 'ipld-explorer-components/forms'
// or import all components at once
import { HeliaProvider, ExploreProvider, StartExploringPage, ExplorePage, IpldExploreForm, IpldCarExploreForm, CidInfo, ObjectInfo } from 'ipld-explorer-components'

export {
  /**
   * Helia provider required for IPLD Explorer components
   */
  HeliaProvider,
  /**
   * A hook to gain access to the Helia node
   */
  useHelia,
  /**
   * Explore provider required for IPLD Explorer components. This must be a child  (direct or not) of HeliaProvider.
   */
  ExploreProvider,
  /**
   * A hook to gain access to the Explore state. You can programmatically set the CID or path to explore using the provided functions.
   */
  useExplore,
  /**
   * The page to render when you do not have an explicit CID in the URL to explore yet.
   */
  StartExploringPage,
  /**
   * When there is a #/explore/CID in the URL, this component will render the ExplorePage
   */
  ExplorePage,
  /**
   * The form to use to allow entry of a CID to explore. You can place this anywhere in your app within the ExploreProvider.
   */
  IpldExploreForm,
  /**
   * The form to use to allow uploading of a CAR file to explore. You can place this anywhere in your app within the ExploreProvider.
   */
  IpldCarExploreForm,
  CidInfo,
  ObjectInfo,
}

import 'tachyons'
import 'ipfs-css'
import 'ipld-explorer-components/css'