import { usePopup } from 'components/layers';

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

interface SelectionHeaderProps {
  selected: string[];
  onCancel: () => void;
}

export const SelectionHeader = ({
  selected,
  onCancel,
}: SelectionHeaderProps) => {
  // const { workspaceId } = useParams();

  const exportMenu = usePopup(ExportMenu, {
    defaultProps: { selected },
  });

  return (
    <Header
      left={
        <span className="header-link cup" onClick={onCancel}>
          Cancel
        </span>
      }
      title={`${selected.length} selected`}
      right={
        <Box spacing={2}>
          <Button
            color="blue"
            onClick={(ev: React.MouseEvent) =>
              exportMenu.toggle(ev.currentTarget)
            }
            disabled={selected.length !== 1}
          >
            Export
          </Button>
          {/* <Button color="gray" disabled>
            Delete
          </Button> */}
        </Box>
      }
    />
  );
};