import { Suspense, lazy } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';
import { gql } from '@apollo/client';
import { useQueryWithPreviousData } from 'lib/apollo';
import {
  GroupedAnalyticsQuery,
  GroupedAnalyticsQueryVariables,
} from 'types/graphql';

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

import { PATHS as WORKSPACE } from '../index';
import { SEGMENT_KEY } from 'components/collection/DatasetItem';
import { SET_KEY } from './FiltersPanel';
import { AnalyticsGroup } from 'components/analytics/schema';

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

export const GROUPED_ANALYTICS = gql`
  query GROUPED_ANALYTICS($id: ID!) {
    groups: getGroupedAnalytics(collectionId: $id) {
      ...AnalyticsGroup
    }
  }
  ${AnalyticsGroup}
`;

export const DatasetAnalytics = () => {
  const { [WORKSPACE.collectionId]: collectionId } = useParams();
  const [search] = useSearchParams();
  const segmentId = search.get(SEGMENT_KEY);
  const filterId = search.get(SET_KEY);

  const analyticsQuery = useQueryWithPreviousData<
    GroupedAnalyticsQuery,
    GroupedAnalyticsQueryVariables
  >(GROUPED_ANALYTICS, {
    variables: { id: filterId || segmentId || collectionId! },
    fetchPolicy: 'network-only',
  });

  const data = analyticsQuery.data;

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