import { Suspense, lazy } from 'react';
import { useParams } from 'react-router-dom';
import { gql } from '@apollo/client';
import { useQueryWithPreviousData } from 'lib/apollo';
import { AnalyticsGroup } from 'components/analytics/schema';
import {
  AllianceAnalyticsQuery,
  AllianceAnalyticsQueryVariables,
} from 'types/graphql';

import { useUrlSearchParams } from 'hooks/useUrlSearchParams';

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

import { PATHS as ALLIANCE_PAGE } from '../index';

export const ALLIANCE_ANALYTICS = gql`
  query ALLIANCE_ANALYTICS($allianceId: ID!, $collectionId: ID) {
    groups: allianceAnalytics(
      allianceId: $allianceId
      collectionId: $collectionId
    ) {
      ...AnalyticsGroup
    }
  }
  ${AnalyticsGroup}
`;

const AnalyticsFeed = lazy(() => import('components/analytics/AnalyticsFeed'));

export const AllianceAnalytics = () => {
  const { allianceId } = useParams();
  const {
    [ALLIANCE_PAGE.collection]: collectionId,
    [ALLIANCE_PAGE.set]: setId,
  } = useUrlSearchParams();

  const { data, loading } = useQueryWithPreviousData<
    AllianceAnalyticsQuery,
    AllianceAnalyticsQueryVariables
  >(ALLIANCE_ANALYTICS, {
    variables: {
      allianceId: allianceId!,
      collectionId: setId || collectionId,
    },
    fetchPolicy: 'network-only',
  });

  return (
    <ErrorBoundary>
      <Box position="relative" height="100%" flex="grow" overflow="hidden">
        <Suspense fallback={<Spinner show />}>
          <AnalyticsFeed data={data?.groups} />
        </Suspense>
        <Spinner show={loading} />
      </Box>
    </ErrorBoundary>
  );
};