import { useQuery } from '@apollo/client';
import { ALL_WORKSPACES } from 'components/workspace/schema/queries';
import { AllWorkspacesQuery } from 'types/graphql';

import { useModal } from 'components/layers';

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

import { WorkspacesList } from 'components/workspace/WorkspacesList';
import { CreateWorkspaceModal } from 'components/workspace/modals';

export const Workspaces = () => {
  const { data, loading } = useQuery<AllWorkspacesQuery>(ALL_WORKSPACES, {
    fetchPolicy: 'cache-and-network',
    nextFetchPolicy: 'cache-first',
  });

  const createWorkspaceModal = useModal(CreateWorkspaceModal);

  if (loading && !data) {
    return <Spinner show />;
  } else if (data?.workspaces?.length === 0) {
    return (
      <Box height="100%" display="flex" align="center" justify="center">
        <CreateWorkspaceModal />
      </Box>
    );
  } else {
    return (
      <Box height="100%" display="flex" column>
        <Header
          className="sticky"
          style={{ top: 0, zIndex: 1 }}
          title="Workspaces"
          right={
            <Button onClick={() => createWorkspaceModal.show()}>
              Create workspace
            </Button>
          }
        />
        {data?.workspaces && <WorkspacesList items={data.workspaces} />}
        <Spinner show={loading} />
      </Box>
    );
  }
};