import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useQuery, gql } from '@apollo/client';
import { useQueryWithPreviousData } from 'lib/apollo';
import { ALLIANCE } from 'components/alliance/schema/queries';
import { formatNumber } from 'utils';

import { useUrlSearchParams } from 'hooks/useUrlSearchParams';
import { usePopup } from 'components/layers';

import { Box, Button } from 'components/common';
import { Header } from 'components/Header';
import { ExportMenu } from 'components/collection/ExportMenu';

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

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

export const COLLECTION = gql`
  query COLLECTION($collectionId: ID!) {
    collection: getCollection(collectionId: $collectionId) {
      id
      parentId
      name
      status
      totalProfiles
      dateCreated
    }
  }
`;

export const AllianceAnalyticsHeader = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { allianceId } = useParams();
  const {
    [ALLIANCE_PAGE.collection]: collectionId,
    [ALLIANCE_PAGE.filter]: filtersOpen,
    [ALLIANCE_PAGE.set]: setId,
  } = useUrlSearchParams();

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

  const collectionQuery = useQueryWithPreviousData<
    CollectionQuery,
    CollectionQueryVariables
  >(COLLECTION, {
    skip: !collectionId,
    variables: { collectionId: collectionId! },
    fetchPolicy: 'cache-and-network',
  });

  const setQuery = useQueryWithPreviousData<
    CollectionQuery,
    CollectionQueryVariables
  >(COLLECTION, {
    skip: !setId,
    variables: { collectionId: setId },
    fetchPolicy: 'cache-and-network',
  });

  const alliance = allianceQuery?.data?.alliance;
  const collection = collectionQuery?.data?.collection;
  const set = setQuery?.data?.collection;

  const showFiltersPanel = () => {
    navigate({
      search: assignParams(location.search, (s) => {
        s.set(ALLIANCE_PAGE.filter, '1');
      }),
    });
  };

  const exportMenu = usePopup(ExportMenu, {
    defaultProps: {
      selected: [setId || collectionId],
    },
  });

  const renderTotalProfiles = () => {
    const totalProfiles =
      alliance && setId && set ? (
        <span>
          {formatNumber(set.totalProfiles)} /{' '}
          {formatNumber(
            collection ? collection.totalProfiles : alliance.totalProfiles
          )}
        </span>
      ) : collectionId && collection ? (
        <span>{formatNumber(collection.totalProfiles)}</span>
      ) : alliance ? (
        <span>{formatNumber(alliance.totalProfiles)}</span>
      ) : null;

    if (totalProfiles) {
      return (
        <span>
          {totalProfiles} <span>profiles</span>
        </span>
      );
    } else {
      return null;
    }
  };

  return (
    <Header
      className="shadow1"
      left={
        <Box className="truncate" spacing={2}>
          {alliance && (
            <Link to=".." className="link c-black">
              {alliance.name}
            </Link>
          )}
          {collectionId && collection && (
            <>
              <span>/</span>
              <span className="c-black">{collection.name}</span>
            </>
          )}
        </Box>
      }
      title={renderTotalProfiles()}
      right={
        <Box spacing={2}>
          <Button
            onClick={showFiltersPanel}
            color="gray"
            disabled={Boolean(filtersOpen)}
          >
            Filter
          </Button>
          <Button
            onClick={(ev: React.MouseEvent) =>
              exportMenu.toggle(ev.currentTarget)
            }
            disabled={!setId && !collectionId}
          >
            Export
          </Button>
        </Box>
      }
    />
  );
};