import { memo } from 'react';
import { useParams } from 'react-router-dom';

import { useSelectedCollections } from 'components/workspace/useSelectedCollections';
import { useOverflow } from 'hooks/useOverflow';

import { Box, Spinner } from 'components/common';
import { ErrorScreen } from 'components/ErrorScreen';
import { ErrorBoundary } from 'components/ErrorBoundary';
import { Collections } from 'components/collection/Collections';
import { WorkspaceHeader } from './WorkspaceHeader';
import { SelectionHeader } from './SelectionHeader';
import { StartHere } from './StartHere';

import { useWorkspaceQuery } from 'components/workspace/useWorkspaceQuery';

const MemoizedCollections = memo(Collections);

export const Workspace = () => {
  const { workspaceId } = useParams();

  const { loading, error, workspace, collections } = useWorkspaceQuery(
    workspaceId!
  );

  const [isOverflown, scrollProps] = useOverflow();

  const list = collections ?? [];
  const { selected, clearSelection, handleSelect } =
    useSelectedCollections(list);

  const totalProfiles = workspace?.totalProfiles;

  const renderHeader = () => {
    if (selected.length > 0) {
      return <SelectionHeader selected={selected} onCancel={clearSelection} />;
    } else {
      return <WorkspaceHeader />;
    }
  };

  const renderCollections = () => {
    return (
      <MemoizedCollections
        data={list}
        totalProfiles={totalProfiles!}
        selected={selected}
        onSelect={handleSelect}
      />
    );
  };

  return (
    <ErrorBoundary>
      <Box
        {...scrollProps}
        height="100%"
        display="flex"
        column
        overflow="auto"
        style={{ paddingBottom: 100 }}
      >
        <Box
          className={isOverflown ? 'shadow1' : undefined}
          position="sticky"
          top={0}
          zIndex={1}
        >
          {renderHeader()}
        </Box>

        {collections ? (
          list.length ? (
            renderCollections()
          ) : (
            <StartHere />
          )
        ) : error ? (
          <ErrorScreen>{error.message}</ErrorScreen>
        ) : null}

        <Spinner show={loading} />
      </Box>
    </ErrorBoundary>
  );
};