import { splitProps, type JSX } from "solid-js";
import { useNavigator } from "./StackedRouter";
import { useResolvedPath } from "@solidjs/router";

function handleClick(
  push: (name: string, state: unknown) => void,
  event: MouseEvent & { currentTarget: HTMLAnchorElement },
) {
  const target = event.currentTarget;
  event.preventDefault();
  push(target.href, { state: target.getAttribute("state") || undefined });
}

const A = (oprops: Omit<JSX.HTMLElementTags["a"], "onClick" | "onclick">) => {
  const [props, rest] = splitProps(oprops, ["href"]);
  const resolvedPath = useResolvedPath(() => props.href || "#");
  const { push } = useNavigator();
  return <a onClick={[handleClick, push]} href={resolvedPath()} {...rest}></a>;
};

export default A;