import { useLocation, useParams } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import { ALLIANCE } from 'components/alliance/schema/queries';
import { AllianceQuery, AllianceQueryVariables } from 'types/graphql';

import { SidebarNavLink } from 'components/sidebar/Sidebar';
import { assignParams } from 'components/router/assignParams';

import { PATHS as ALLIANCE_PAGE } from './index';
import { ANALYTICS_NAVIGATION_KEY } from './AllianceSidebar';

export const AllianceNavigation = () => {
  const location = useLocation();
  const { allianceId } = useParams();

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

  const analyticsRoute = {
    pathname: ALLIANCE_PAGE.analytics,
    search: assignParams(location.search, (s) => {
      s.set(ANALYTICS_NAVIGATION_KEY, '1');
    }) as string,
  };

  const isOwner = data?.alliance.createdBy.me;
  const hasData = Boolean(data?.alliance.totalProfiles);

  return (
    <div className="flex flexColumn" style={{ paddingBottom: 100 }}>
      <SidebarNavLink to=".." end>
        Back to Alliances
      </SidebarNavLink>
      <SidebarNavLink to={ALLIANCE_PAGE.collections}>
        Collections
      </SidebarNavLink>
      <SidebarNavLink to={ALLIANCE_PAGE.segments} disabled={!hasData}>
        Segments
      </SidebarNavLink>
      <SidebarNavLink to={analyticsRoute} disabled={!hasData}>
        Analytics
      </SidebarNavLink>
      <SidebarNavLink to={ALLIANCE_PAGE.members}>Members</SidebarNavLink>
      <SidebarNavLink to={ALLIANCE_PAGE.activity}>Activity Log</SidebarNavLink>
      {isOwner && (
        <SidebarNavLink to={ALLIANCE_PAGE.settings}>Settings</SidebarNavLink>
      )}
    </div>
  );
};