import * as Sentry from '@sentry/react';
import { Route, Routes } from 'react-router-dom';
import {
  About,
  Builder,
  Calculator,
  Changelog,
  Import,
  Pokestats,
  Report,
  Rules,
  Settings,
  Tracker,
} from 'components';
import { BadgePage } from 'components/Badges/elements';
import ErrorBoundary from 'error/ErrorBoundary';

function AppRouter(): JSX.Element {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Tracker />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/rules"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Rules />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/stats"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Pokestats />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/builder"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Builder />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/calculator"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Calculator />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/settings"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Settings />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/report"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Report />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/changelog"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Changelog />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/about"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <About />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/import"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <Import />
          </Sentry.ErrorBoundary>
        }
      />
      <Route
        path="/badgedetail/:game/:badge"
        element={
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            <BadgePage />
          </Sentry.ErrorBoundary>
        }
      />
    </Routes>
  );
}

export default AppRouter;