import { ParsedSearch, searchModeLabel, useGalleryStore } from '../../store'
import { FolderScopeDropdown } from '../FolderScopeDropdown'

export function ToolbarTitle({ parsedSearch }: { parsedSearch: ParsedSearch }) {
  const search = useGalleryStore((state) => state.search)
  const totalImages = useGalleryStore((state) => state.totalImages)
  const loadedCount = useGalleryStore((state) => state.loadedCount)
  const selectedFolderId = useGalleryStore((state) => state.selectedFolderId)
  const collectionTitle = useGalleryStore((state) => state.collectionTitle)
  const folders = useGalleryStore((state) => state.folders)
  const activeView = useGalleryStore((state) => state.activeView)

  const selectedFolder = folders.find((folder) => folder.id === selectedFolderId)
  const title = collectionTitle ?? (selectedFolder ? selectedFolder.name : 'All Media')
  const hasActiveSearch = search.trim().length > 0

  return (
    <>
      <div className="flex min-w-0 shrink-0 items-baseline gap-2.5">
        <h2 className="max-w-32 truncate text-[15px] font-semibold text-white lg:max-w-48">
          {title}
        </h2>
        <span className="shrink-0 text-xs text-gray-600">
          {loadedCount < totalImages
            ? `${loadedCount.toLocaleString()} / ${totalImages.toLocaleString()}`
            : totalImages.toLocaleString()}
        </span>
        {hasActiveSearch ? (
          <span className="shrink-0 rounded-md border border-blue-500/20 bg-blue-500/10 px-2 py-0.5 text-[10px] tracking-[0.14em] text-blue-300 uppercase">
            {searchModeLabel(parsedSearch.mode)}
          </span>
        ) : null}
      </div>

      {activeView === 'timeline' ? <FolderScopeDropdown /> : null}
    </>
  )
}
