import { useState, useCallback } from "react"
import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react"

export type SortDirection = "asc" | "desc" | null

export function useTableSort(defaultSortBy: string = "", defaultSortDir: SortDirection = null) {
  const [sortBy, setSortBy] = useState<string>(defaultSortBy)
  const [sortDir, setSortDir] = useState<SortDirection>(defaultSortDir)

  const handleSort = useCallback((column: string) => {
    if (sortBy === column) {
      if (sortDir === "asc") setSortDir("desc")
      else if (sortDir === "desc") {
        setSortBy("")
        setSortDir(null)
      } else setSortDir("asc")
    } else {
      setSortBy(column)
      setSortDir("asc")
    }
  }, [sortBy, sortDir])

  const appendSortParams = useCallback((params: URLSearchParams) => {
    if (sortBy && sortDir) {
      params.append("sort_by", sortBy)
      params.append("sort_dir", sortDir)
    }
  }, [sortBy, sortDir])

  const SortIcon = ({ column }: { column: string }) => {
    if (sortBy !== column || !sortDir) {
      return <ChevronsUpDown className="ml-2 h-4 w-4 text-muted-foreground opacity-50" />
    }
    return sortDir === "asc" ? (
      <ArrowUp className="ml-2 h-4 w-4 text-foreground" />
    ) : (
      <ArrowDown className="ml-2 h-4 w-4 text-foreground" />
    )
  }

  return { sortBy, sortDir, handleSort, appendSortParams, SortIcon }
}