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 { Box, Spinner } from 'components/common';
import { Collections } from 'components/alliance/Collections';
import { Placeholder } from 'components/alliance/Placeholder';

export const AllianceCollections = () => {
  const { allianceId } = useParams();
  const { data, loading } = useQuery<AllianceQuery, AllianceQueryVariables>(
    ALLIANCE,
    {
      variables: { allianceId: allianceId! },
      fetchPolicy: 'cache-and-network',
      nextFetchPolicy: 'cache-first',
    }
  );

  if (data?.alliance.collections.length === 0) {
    return <Placeholder />;
  }

  return (
    <Box flex="grow" padding={4} style={{ paddingBottom: 100 }}>
      <Collections
        data={data?.alliance.collections}
        storageKey="AllianceCollections"
      />
      <Spinner show={loading} />
    </Box>
  );
};