import { useRouter } from 'next/router'
import queryString from 'query-string'
import { useCallback } from 'react'

const useQueryState = (initialState) => {
  const router = useRouter()
  const { query } = router
  const queryState = {
    ...initialState,
    ...query,
  }

  const setQueryState = useCallback(
    (newFilter) => {
      const { pathname = '' } = router

      const newQuery = queryString.stringify({ ...query, ...newFilter })
      router.push(`${pathname}?${newQuery}`)
    },
    [query, router],
  )

  return {
    queryState,
    setQueryState,
  }
}

export default useQueryState