ultisuite-client/components/drive/drive-mobile-search-sheet.tsx

"use client"

import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DriveSearchBar } from "@/components/drive/drive-search-bar"
import { DriveSearchSuggestionsPanel } from "@/components/drive/drive-search-suggestions"
import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet"
import type { DriveFileInfo } from "@/lib/api/types"
import { useDriveSearchSuggestions } from "@/lib/api/hooks/use-drive-queries"
import {
  type DriveSearchScope,
  defaultDriveSearchScope,
} from "@/lib/drive/drive-search"
import type { DriveView } from "@/lib/drive/drive-url"
import { useDebouncedValue } from "@/lib/hooks/use-debounced-value"
import {
  DRIVE_DIALOG_DIVIDER,
  DRIVE_SHEET_CONTENT,
  DRIVE_SHEET_OVERLAY,
  DRIVE_TEXT_SECONDARY,
} from "@/lib/drive/drive-dialog-styles"
import { cn } from "@/lib/utils"

export function DriveMobileSearchSheet({
  open,
  onClose,
  search,
  onSearchChange,
  searchScope,
  onSearchScopeChange,
  folderPath,
  contextView,
  resultsMode = false,
  onPickItem,
  onSubmitSearch,
}: {
  open: boolean
  onClose: () => void
  search: string
  onSearchChange: (q: string) => void
  searchScope: DriveSearchScope
  onSearchScopeChange: (scope: DriveSearchScope) => void
  folderPath: string
  contextView: DriveView
  resultsMode?: boolean
  onPickItem: (item: DriveFileInfo, contextItems: DriveFileInfo[]) => void
  onSubmitSearch: () => void
}) {
  const showFolderScope = folderPath !== "/"
  const effectiveScope =
    searchScope === "folder" && !showFolderScope
      ? defaultDriveSearchScope(contextView, folderPath)
      : searchScope
  const searchPath = effectiveScope === "folder" ? folderPath : "/"
  const debouncedQuery = useDebouncedValue(search, 250)
  const { data, isFetching } = useDriveSearchSuggestions(
    debouncedQuery,
    effectiveScope,
    searchPath,
    open && !resultsMode && debouncedQuery.trim().length >= 2
  )
  const suggestions = data?.files ?? []

  return (
    <Sheet open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
      <SheetContent
        side="bottom"
        hideClose
        overlayClassName={DRIVE_SHEET_OVERLAY}
        className={cn(DRIVE_SHEET_CONTENT, "flex h-[min(85dvh,520px)] flex-col")}
      >
        <SheetTitle className="sr-only">Rechercher dans Drive</SheetTitle>
        <SheetDescription className="sr-only">
          Rechercher des fichiers et dossiers dans Drive.
        </SheetDescription>
        <div className={cn("flex shrink-0 items-center gap-2 border-b px-2 py-2", DRIVE_DIALOG_DIVIDER)}>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className={cn("size-10 shrink-0", DRIVE_TEXT_SECONDARY)}
            onClick={onClose}
            aria-label="Fermer la recherche"
          >
            <ArrowLeft className="size-5" />
          </Button>
          <div className="min-w-0 flex-1">
            <DriveSearchBar
              value={search}
              onChange={onSearchChange}
              scope={searchScope}
              onScopeChange={onSearchScopeChange}
              folderPath={folderPath}
              contextView={contextView}
              resultsMode
              autoFocus={open}
              className="[&_input]:h-10 [&_input]:text-base"
            />
          </div>
        </div>
        <div className="min-h-0 flex-1 overflow-y-auto px-2 py-2">
          {search.trim().length >= 2 ? (
            <DriveSearchSuggestionsPanel
              query={search}
              scope={effectiveScope}
              onScopeChange={onSearchScopeChange}
              showFolderScope={showFolderScope}
              suggestions={suggestions}
              loading={isFetching && suggestions.length === 0}
              onPickItem={(item) => {
                onPickItem(item, suggestions)
                onClose()
              }}
              onSubmitSearch={() => {
                onSubmitSearch()
                onClose()
              }}
              className="static rounded-xl shadow-none"
            />
          ) : (
            <p className={cn("px-2 py-3 text-sm", DRIVE_TEXT_SECONDARY)}>
              Recherchez des fichiers et dossiers dans tout le Drive.
            </p>
          )}
        </div>
      </SheetContent>
    </Sheet>
  )
}