import { useState, useEffect, useRef, useMemo } from 'react';
import { history } from 'umi';
import { getPageQuery } from '@/utils/utils';
import { stringify } from 'qs';
// import { BASE_NAME } from '@/config';

const useUrlQuery = (queryKey: string, queryValue?: string) => {
  const value = useMemo(() => {
    const qsObj = getPageQuery();
    return qsObj[queryKey] || queryValue || '';
  }, []);

  const state = useState<string>(value);
  const [query] = state;

  const first = useRef(true);

  useEffect(() => {
    if (first.current) {
      first.current = false;
      return;
    }

    history.push(
      `${location.pathname.replace(BASE_NAME, '')}?${stringify({
        ...getPageQuery(),
        [queryKey]: query
      })}`
    );
  }, [query]);

  return state;
};

export default useUrlQuery;