import { useCallback, useEffect, useState } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";

export function useWindowArea() {
  const [windowLength, setWindowLength] = useState(window.innerWidth);
  const [windowHeight, setWindowHeight] = useState(window.innerHeight);

  useEffect(() => {
    const onModified = () => {
      setWindowLength(window.innerWidth);
      setWindowHeight(window.innerHeight);
    };

    window.addEventListener("resize", onModified);

    return () => {
      window.removeEventListener("resize", onModified);
    };
  }, []);

  return { windowLength, windowHeight };
}

export function useTo() {
  const navigate = useNavigate();

  return (pathname: string, search: string = window.location.search) =>
    navigate({ ...window.location, pathname, search });
}

export function useParam(text: string, defaultValue: string) {
  const [searchParams, setSearchParams] = useSearchParams();
  const param = searchParams.get(text) ?? defaultValue;

  return {
    param,
    setParam: useCallback(
      (param: string) => {
        searchParams.set(text, param.toString());
        setSearchParams(searchParams);
      },
      [searchParams, setSearchParams],
    ),
  };
}

export function useIntParam(text: string, defaultValue: number) {
  const { param, setParam } = useParam(text, defaultValue.toString());

  return {
    param: Number(param),
    setParam: useCallback(
      (param: number) => {
        setParam(param.toString());
      },
      [setParam],
    ),
  };
}

export function useWant(route: string) {
  const to = useTo();
  const { want = "" } = useParams<{ want: string }>();

  return {
    want,
    setWant: useCallback(
      (want: string) => {
        to(route + "/" + want);
      },
      [to, route],
    ),
  };
}