import { Reorder } from 'framer-motion'
import { useGalleryStore } from '../../store'
import { Dropdown } from '../menu'
import { FolderItem } from './FolderItem'
import { useFolderOrdering } from './useFolderOrdering'

export function LibrarySection() {
  const folders = useGalleryStore((state) => state.folders)
  const selectedFolderId = useGalleryStore((state) => state.selectedFolderId)
  const indexingProgress = useGalleryStore((state) => state.indexingProgress)
  const reorderFolders = useGalleryStore((state) => state.reorderFolders)

  const {
    customOrdering,
    displayedFolders,
    draggedFolderId,
    finishReorder,
    folderListRef,
    handleReorder,
    librarySort,
    moveFolderByKeyboard,
    pointerYRef,
    setDraggedFolderId,
    setLibrarySort,
  } = useFolderOrdering(folders, reorderFolders)

  return (
    <>
      {folders.length > 0 && (
        <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-1">
          <span className="text-[10px] font-semibold tracking-[0.15em] text-gray-600 uppercase">
            Libraries
          </span>
          <Dropdown
            value={librarySort}
            onChange={setLibrarySort}
            ariaLabel="Library order"
            trigger="compact"
            panelClassName="min-w-0"
            options={[
              { value: 'az', label: 'A-Z' },
              { value: 'za', label: 'Z-A' },
              { value: 'custom', label: 'Custom' },
            ]}
          />
        </div>
      )}

      <Reorder.Group
        ref={folderListRef}
        as="div"
        axis="y"
        values={displayedFolders.map((folder) => folder.id)}
        onReorder={customOrdering ? handleReorder : () => {}}
        layoutScroll
        className="min-h-0 flex-1 space-y-px overflow-y-auto px-2 pb-2"
      >
        {folders.length === 0 ? (
          <p className="px-3 py-6 text-center text-xs leading-relaxed text-gray-700">
            Add a folder to get started
          </p>
        ) : (
          displayedFolders.map((folder) => (
            <FolderItem
              key={folder.id}
              folder={folder}
              selected={selectedFolderId === folder.id}
              progress={indexingProgress[folder.id]}
              customOrdering={customOrdering}
              dragging={draggedFolderId === folder.id}
              onDragStart={(pointerY) => {
                pointerYRef.current = pointerY
                setDraggedFolderId(folder.id)
              }}
              onDragEnd={finishReorder}
              onKeyboardMove={(direction) => moveFolderByKeyboard(folder.id, direction)}
            />
          ))
        )}
      </Reorder.Group>
    </>
  )
}
