import { NavLink, useNavigate, useParams } from 'react-router-dom';
import { PATHS as WORKSPACE_PAGE } from './index';
import { useQuery } from '@apollo/client';
import { WorkspaceQuery, WorkspaceQueryVariables } from 'types/graphql';
import { WORKSPACE } from 'components/workspace/schema/queries';

import { usePopup } from 'components/layers';

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

export const WorkspaceHeader = () => {
  const { workspaceId } = useParams();
  const navigate = useNavigate();

  const { data } = useQuery<WorkspaceQuery, WorkspaceQueryVariables>(
    WORKSPACE,
    {
      variables: { workspaceId: workspaceId! },
      fetchPolicy: 'cache-first',
    }
  );

  const isEmpty = Boolean(data?.workspace?.totalProfiles) === false;

  const importMenu = usePopup(FlyoutMenu, {
    placement: 1,
    alignment: 2,
    defaultProps: {
      options: [
        {
          label: 'Import .csv file',
          value: 'csv',
          onClick: () => navigate(`../${WORKSPACE_PAGE.import}`),
        },
        {
          label: 'Import from Klaviyo',
          value: 'klaviyo',
          onClick: () => navigate(`../${WORKSPACE_PAGE.klaviyo}`),
        },
      ],
    },
  });

  return (
    <Header
      left={<span className="c-black">{data?.workspace?.name}</span>}
      title={
        <Box spacing={4}>
          <NavLink
            to={`../${WORKSPACE_PAGE.collections}`}
            className="header-link"
          >
            Collections
          </NavLink>
          <NavLink
            to={`../${WORKSPACE_PAGE.analytics}`}
            className="header-link"
          >
            Analytics
          </NavLink>
        </Box>
      }
      right={
        <Box spacing={2}>
          <Button
            onClick={() => navigate(`../${WORKSPACE_PAGE.filter}`)}
            color="gray"
            disabled={isEmpty}
          >
            Create superset
          </Button>
          <Button onClick={(ev: any) => importMenu.toggle(ev.currentTarget)}>
            Import
          </Button>
        </Box>
      }
    />
  );
};