photos/web/SelectionBar.tsx

import type { Selection } from './useSelection';
import { Archive, ArchiveRestore, Heart, Plus, Trash2, Undo2, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useAlbums } from './usePhotosData';
import { useAssetActions } from './useAssetActions';

// The bar that replaces the header once anything is selected — Immich does the same, and it keeps the
// destructive buttons off screen entirely until they have something to act on.

type SelectionBarProps = {
  selection: Selection;
  /** Trash swaps the whole action set: restore and delete-forever, not favorite and archive. */
  inTrash?: boolean;
  /** When viewing one album, offer "remove from album" alongside the library-wide actions. */
  albumId?: string;
  /** Currently in the archive view, so the archive button should read "unarchive". */
  archived?: boolean;
};

export const SelectionBar = ({ selection, inTrash = false, albumId, archived = false }: SelectionBarProps) => {
  const { ids, count, clear, selectAll } = selection;
  const { setFavorite, setArchived, trash, restore, deleteForever, addToAlbum, removeFromAlbum, createAlbum } =
    useAssetActions();
  const { data: albums } = useAlbums();

  const run = (action: () => void) => {
    action();
    clear();
  };

  return (
    <div className="flex items-center gap-1 border-b px-2 py-1.5">
      <Button variant="ghost" size="icon" onClick={clear} title="Clear selection">
        <X className="h-4 w-4" />
      </Button>
      <span className="mr-2 text-sm font-medium">{count} selected</span>
      <Button variant="ghost" size="sm" onClick={selectAll}>
        Select all
      </Button>

      <div className="flex-1" />

      {inTrash ? (
        <>
          <Button variant="ghost" size="sm" onClick={() => run(() => restore.mutate(ids))}>
            <Undo2 className="mr-1.5 h-4 w-4" />
            Restore
          </Button>
          <Button variant="ghost" size="sm" onClick={() => run(() => deleteForever.mutate(ids))}>
            <Trash2 className="mr-1.5 h-4 w-4" />
            Delete permanently
          </Button>
        </>
      ) : (
        <>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <Plus className="mr-1.5 h-4 w-4" />
                Add to album
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="max-h-80 overflow-y-auto">
              <DropdownMenuItem
                onClick={() => {
                  const albumName = window.prompt('New album name');
                  if (albumName) run(() => createAlbum.mutate({ albumName, assetIds: ids }));
                }}
              >
                <Plus className="mr-2 h-4 w-4" />
                New album
              </DropdownMenuItem>
              {albums && albums.length > 0 && <DropdownMenuSeparator />}
              {albums?.map((album) => (
                <DropdownMenuItem
                  key={album.id}
                  onClick={() => run(() => addToAlbum.mutate({ albumId: album.id, ids }))}
                >
                  {album.albumName}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

          {albumId && (
            <Button variant="ghost" size="sm" onClick={() => run(() => removeFromAlbum.mutate({ albumId, ids }))}>
              Remove from album
            </Button>
          )}

          <Button
            variant="ghost"
            size="icon"
            title="Favorite"
            onClick={() => run(() => setFavorite.mutate({ ids, isFavorite: true }))}
          >
            <Heart className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            title={archived ? 'Unarchive' : 'Archive'}
            onClick={() => run(() => setArchived.mutate({ ids, archived: !archived }))}
          >
            {archived ? <ArchiveRestore className="h-4 w-4" /> : <Archive className="h-4 w-4" />}
          </Button>
          <Button variant="ghost" size="icon" title="Move to trash" onClick={() => run(() => trash.mutate(ids))}>
            <Trash2 className="h-4 w-4" />
          </Button>
        </>
      )}
    </div>
  );
};