import { useParams } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import { ALLIANCE } from 'components/alliance/schema/queries';

import { AllianceQuery, AllianceQueryVariables } from 'types/graphql';

import { AllianceAnalyticsHeader } from './AllianceAnalyticsHeader';
import { AllianceAnalytics } from './AllianceAnalytics';

export const AllianceAnalyticsScreen = () => {
  const { allianceId } = useParams();

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

  const hasData = data && data.alliance.totalProfiles > 0;
  return (
    <>
      <AllianceAnalyticsHeader />
      {hasData && <AllianceAnalytics />}
    </>
  );
};