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

import { withErrorBoundary } from 'components/ErrorBoundary';
import { Redirect } from 'components/router/Redirect';

import { AlliancePageHeader } from './AlliancePageHeader';
import { ActivityLog } from './activity/ActivityLog';
import { AllianceMembers } from './members/AllianceMembers';
import { AllianceCollections } from './collections/AllianceCollections';
import { AllianceSegments } from './segments/AllianceSegments';

export const AllianceRoutes = () => {
  const { allianceId } = useParams();
  const { data } = useQuery<AllianceQuery, AllianceQueryVariables>(ALLIANCE, {
    variables: { allianceId: allianceId! },
    fetchPolicy: 'cache-only',
    // nextFetchPolicy: 'cache-first',
  });

  return (
    <>
      <div className="sticky shadow1" style={{ top: 0 }}>
        <AlliancePageHeader data={data!.alliance} />
      </div>
      <div className="flexGrow">
        <Routes>
          <Route index element={<Redirect to={ALLIANCE_PAGE.collections} />} />
          <Route
            path={ALLIANCE_PAGE.collections}
            element={withErrorBoundary(<AllianceCollections />)}
          />
          <Route
            path={ALLIANCE_PAGE.segments}
            element={withErrorBoundary(<AllianceSegments />)}
          />
          <Route
            path={ALLIANCE_PAGE.activity}
            element={withErrorBoundary(<ActivityLog />)}
          />
          <Route
            path={ALLIANCE_PAGE.members}
            element={withErrorBoundary(<AllianceMembers />)}
          />
        </Routes>
      </div>
    </>
  );
};