"use client";
import { useEffect, useState } from "react";

const isClient = typeof window === "object";

type HistoryMethod = "pushState" | "replaceState";

declare global {
	interface WindowEventMap {
		pushstate: CustomEvent<{ state: unknown }>;
		replacestate: CustomEvent<{ state: unknown }>;
	}
}

const on = (
	obj: Window,
	type: keyof WindowEventMap,
	listener: (event: Event) => void,
) => obj.addEventListener(type, listener);

const off = (
	obj: Window,
	type: keyof WindowEventMap,
	listener: (event: Event) => void,
) => obj.removeEventListener(type, listener);

const patchHistoryMethod = (method: HistoryMethod) => {
	const original = history[method];

	history[method] = function (
		this: History,
		data: unknown,
		title: string,
		url?: string | null,
	) {
		const result = original.apply(this, [data, title, url]);
		const event = new CustomEvent<{ state: unknown }>(method.toLowerCase(), {
			detail: { state: data },
		});
		window.dispatchEvent(event);
		return result;
	};
};

if (isClient) {
	patchHistoryMethod("pushState");
	patchHistoryMethod("replaceState");
}

type LocationStateType = {
	trigger: string;
	state: unknown;
	length: number;
	hash: string;
	host: string;
	hostname: string;
	href: string;
	origin: string;
	pathname: string;
	port: string;
	protocol: string;
	search: string;
};

const defaultLocationState: LocationStateType = {
	trigger: "load",
	state: null,
	length: 1,
	hash: "",
	host: "",
	hostname: "",
	href: "",
	origin: "",
	pathname: "",
	port: "",
	protocol: "",
	search: "",
};

export const useLocation = (): LocationStateType => {
	const buildState = (trigger: string): LocationStateType => {
		if (!isClient) {
			return defaultLocationState;
		}

		const { state, length } = history;
		const {
			hash,
			host,
			hostname,
			href,
			origin,
			pathname,
			port,
			protocol,
			search,
		} = window.location;

		return {
			trigger,
			state,
			length,
			hash,
			host,
			hostname,
			href,
			origin,
			pathname,
			port,
			protocol,
			search,
		};
	};

	const [locationState, setLocationState] = useState<LocationStateType>(
		buildState("load"),
	);

	// !! Should try to use the `useEffect` hook with an exhaustive dependency array
	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
	useEffect(() => {
		if (!isClient) {
			return;
		}
		const onChange = (trigger: string) => {
			setLocationState(buildState(trigger));
		};

		const handlePopState = () => onChange("popstate");
		const handlePushState = () => onChange("pushstate");
		const handleReplaceState = () => onChange("replacestate");

		on(window, "popstate", handlePopState);
		on(window, "pushstate", handlePushState);
		on(window, "replacestate", handleReplaceState);

		return () => {
			off(window, "popstate", handlePopState);
			off(window, "pushstate", handlePushState);
			off(window, "replacestate", handleReplaceState);
		};
	}, []);

	return locationState;
};
Use Location components

Use Location

state

length

hash

host

hostname

href

origin

pathname

port

protocol

search
