import { useRoute, useRouter } from 'vue-router'

export function useQueryParam(key: string = 'mode') {
  const route = useRoute()
  const router = useRouter()

  const getQueryParam = (key: string) => {
    return route.query[key]
  }

  const setQueryParam = (key: string, val: string) => {
    router.replace({
      path: route.path,
      query: {
        ...route.query,
        [key]: val === 'list' ? undefined : val,
      },
    })
  }

  const setQueryParams = (keyVal: Record<string, string>) => {
    router.replace({
      path: route.path,
      query: {
        ...route.query,
        ...keyVal,
      },
    })
  }

  return { getQueryParam, setQueryParam, setQueryParams}
}