import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { getSearchData } from '@/redux/search/search.thunks';
import { useRouter } from 'next/router';
import type { ParsedQuery } from 'query-string';
import qs from 'query-string';
import { useEffect } from 'react';

type UseParamsQuery = {
  setSearchQueryInRouter: (searchValue: string) => void;
  searchParams: ParsedQuery<string>;
};

export const useParamsQuery = (): UseParamsQuery => {
  const router = useRouter();
  const dispatch = useAppDispatch();

  const path = router.asPath;

  // The number of the character from which to cut the characters from path.
  const sliceFromCharNumber = 2;
  // The number of the character at which to end the cut string from path.
  const sliceToCharNumber = path.length;
  const searchParams = qs.parse(path.slice(sliceFromCharNumber, sliceToCharNumber));

  const setSearchQueryInRouter = (searchValue: string): void => {
    const searchQuery = {
      search: searchValue,
    };

    router.push(`?${qs.stringify(searchQuery)}`);
  };

  useEffect(() => {
    if (searchParams?.search) dispatch(getSearchData(searchParams.search as string));
  }, [dispatch, searchParams.search]);

  return { setSearchQueryInRouter, searchParams };
};