import { lazy, Suspense, useState } from 'react';
import { useParams } from 'react-router-dom';
import { gql, useQuery } from '@apollo/client';

import {
  WorkspaceAnalyticsQuery,
  WorkspaceAnalyticsQueryVariables,
} from 'types/graphql';

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

import { StartHere } from '../StartHere';
import { AttributesPanel } from './AttributesPanel';
import { AnalyticsGroup } from 'components/analytics/schema';

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

const WORKSPACE_ANALYTICS = gql`
  query WORKSPACE_ANALYTICS($workspaceId: ID!) {
    totalProfiles: getUniqueProfiles(workspaceId: $workspaceId)
    groups: getGroupedAnalytics(workspaceId: $workspaceId) {
      ...AnalyticsGroup
    }
    attributes: countAll(workspaceId: $workspaceId) {
      id
      label
      value
    }
  }
  ${AnalyticsGroup}
`;

export const WorkspaceAnalytics = () => {
  const { workspaceId } = useParams();
  const [sidebar, showSidebar] = useState(true);

  const { data, loading } = useQuery<
    WorkspaceAnalyticsQuery,
    WorkspaceAnalyticsQueryVariables
  >(WORKSPACE_ANALYTICS, {
    variables: { workspaceId: workspaceId! },
  });

  if (loading) {
    return <Spinner show={loading} />;
  } else if (data?.totalProfiles === 0) {
    return <StartHere />;
  } else {
    return (
      <ErrorBoundary>
        <Box flex="grow" height="100%" display="flex" overflow="hidden">
          <Box height="100%" flex="grow" overflow="auto">
            <Suspense fallback={<Spinner show />}>
              <AnalyticsFeed data={data?.groups} />
            </Suspense>
          </Box>
          <SidebarPanel
            side="right"
            show={sidebar}
            onToggle={() => showSidebar((s) => !s)}
          >
            <AttributesPanel
              attributes={data?.attributes}
              totalProfiles={data?.totalProfiles}
            />
          </SidebarPanel>
        </Box>
      </ErrorBoundary>
    );
  }
};