import { useNavigate } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import { AUDIENCE_MANAGER } from 'components/facebook/schema/queries';
import { AudienceManagerQuery } from 'types/graphql';

import { Header } from 'components/Header';
import { Button, Spinner } from 'components/common';

import { AudienceList } from './AudienceList';

import { PATHS as SETTINGS } from 'pages/settings';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';

export const AudienceManager = () => {
  const navigate = useNavigate();

  const { loading, data } = useQuery<AudienceManagerQuery>(AUDIENCE_MANAGER, {
    fetchPolicy: 'cache-and-network',
    nextFetchPolicy: 'cache-first',
  });

  const isFacebookConnected = !data || data?.facebook?.status === 'connected';

  return (
    <div>
      <Header
        className="sticky"
        style={{ top: 0, zIndex: 1 }}
        title="Audience Manager"
        right={
          <Button
            color={isFacebookConnected ? 'gray' : 'blue'}
            onClick={() =>
              navigate(
                `/${HOMEPAGE.settings}/${SETTINGS.integrations}#facebook`
              )
            }
          >
            {isFacebookConnected ? 'Settings' : 'Connect account'}
          </Button>
        }
      />
      {!loading && data && <AudienceList data={data.audiences} />}
      <Spinner show={loading} />
    </div>
  );
};