import { useContext, useCallback } from "react";

import { routerStateContext } from "../components/RouterProvider";

type SetRouterState<T extends string | string[]> = (value: T) => void;

const useRouterState = <T extends string | string[] = string>(
  id: string
): [T, SetRouterState<T>] => {
  const { value, setValue } = useContext(routerStateContext);
  const setKeyValue = useCallback(
    (newValue) => {
      setValue((prevState) => ({ ...prevState, [id]: newValue }));
    },
    [id, setValue]
  );
  return [value[id], setKeyValue];
};

export default useRouterState;