import { Link, useNavigate, useLocation } from 'react-router-dom';

import { usePopup } from 'components/layers';
import { useUrlSearchParams } from 'hooks/useUrlSearchParams';

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

import { assignParams } from 'components/router/assignParams';

export const FILTER_KEY = 'filter';

interface DatasetContentHeaderProps {
  parent?: {
    id: string;
    name: string;
  };
  collection?: {
    id: string;
    name: string;
    totalProfiles: number;
  };
}

export const DatasetContentHeader = ({
  parent,
  collection,
}: DatasetContentHeaderProps) => {
  const navigate = useNavigate();
  const location = useLocation();
  const { [FILTER_KEY]: filtersOpen } = useUrlSearchParams();

  const exportMenu = usePopup(ExportMenu, {
    defaultProps: { selected: collection?.id ? [collection.id] : [] },
  });

  const showFiltersPanel = () => {
    navigate(
      {
        search: assignParams(location.search, (s) => {
          s.set(FILTER_KEY, '1');
        }),
      },
      { replace: true }
    );
  };

  const isRoot = collection?.id && parent?.id === collection?.id;

  return (
    <Header
      className="shadow1"
      left={
        <Box display="flex" spacing={2}>
          <Link to={`../${parent?.id}`} className="link c-black truncate">
            {parent?.name}
          </Link>
          {!isRoot && <span>/</span>}
          {!isRoot && (
            <span className="c-black truncate">{collection?.name}</span>
          )}
        </Box>
      }
      title={collection && `${collection?.totalProfiles} profiles`}
      right={
        <Box display="flex" justify="end" spacing={2}>
          <Button
            onClick={showFiltersPanel}
            color="gray"
            disabled={Boolean(filtersOpen)}
          >
            Filter
          </Button>
          <Button
            onClick={(ev: React.MouseEvent) =>
              exportMenu.toggle(ev.currentTarget)
            }
            color="blue"
          >
            Export
          </Button>
        </Box>
      }
    />
  );
};