// composables/useQuery.ts
import { router } from '@inertiajs/vue3'

export function useQuery() {
  const get = (key: string): string | null => {
    const url = new URL(window.location.href)
    return url.searchParams.get(key)
  }

  const toRouteParams = (sp: URLSearchParams): Record<string, string> => {
    const result: Record<string, string> = {}
    sp.forEach((value, key) => { result[key] = value })
    return result
  }

  const set = (key: string, value: any) => {
    const url = new URL(window.location.href)

    if (value === null || value === undefined || value === '') {
      url.searchParams.delete(key)
    } else {
      url.searchParams.set(key, value)
    }

    router.get(
      url.pathname,
      toRouteParams(url.searchParams),
      {
        preserveState: true,
        replace: true,
      }
    )
  }

  const setMany = (params: Record<string, any>) => {
    const url = new URL(window.location.href)

    for (const [key, value] of Object.entries(params)) {
      if (value === null || value === undefined || value === '') {
        url.searchParams.delete(key)
      } else {
        url.searchParams.set(key, value)
      }
    }

    router.get(
      url.pathname,
      toRouteParams(url.searchParams),
      {
        preserveState: true,
        replace: true,
      }
    )
  }

  return { get, set, setMany }
}