import { Routes, Route, useParams } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import { ALLIANCE } from 'components/alliance/schema/queries';
import { AllianceQuery, AllianceQueryVariables } from 'types/graphql';

import { withErrorBoundary } from 'components/ErrorBoundary';
import { Box, Spinner } from 'components/common';

import { AllianceProvider } from 'components/alliance/AllianceContext';
import { AllianceRoutes } from './AllianceRoutes';
import { AllianceSidebar } from './AllianceSidebar';
import { AllianceSettings } from './settings/AllianceSettings';
import { AllianceAnalyticsScreen } from './analytics/AllianceAnalyticsScreen';

export const PATHS = {
  allianceId: 'allianceId',

  collections: 'collections',
  segments: 'segments',
  analytics: 'analytics',
  members: 'members',
  activity: 'activity',
  settings: 'settings',

  collection: 'collection',
  set: 'set',
  filter: 'filter',
};

export const AlliancePage = () => {
  const { [PATHS.allianceId]: allianceId } = useParams();
  const { data, loading } = useQuery<AllianceQuery, AllianceQueryVariables>(
    ALLIANCE,
    {
      variables: { allianceId: allianceId! },
      fetchPolicy: 'network-only',
      nextFetchPolicy: 'cache-first',
    }
  );

  if (!loading && data?.alliance) {
    return (
      <AllianceProvider data={data.alliance}>
        <Box height="100%" display="flex" overflow="hidden">
          <AllianceSidebar />

          <Box
            height="100%"
            position="relative"
            display="flex"
            flex="grow"
            column
            overflow="autoY"
          >
            <Routes>
              <Route
                path="/*"
                element={withErrorBoundary(<AllianceRoutes />)}
              />
              <Route
                path={PATHS.analytics}
                element={withErrorBoundary(<AllianceAnalyticsScreen />)}
              />
              <Route
                path={PATHS.settings}
                element={withErrorBoundary(<AllianceSettings />)}
              />
            </Routes>
          </Box>
        </Box>
      </AllianceProvider>
    );
  } else {
    return <Spinner show />;
  }
};