"use client";

import { startTransition, useCallback, useContext } from "react";

import { FlightContext, useClient } from "./context.mjs";

export default function Refresh({
  url,
  target,
  local,
  root,
  transition,
  prefetch: prefetchEnabled,
  ttl = Infinity,
  revalidate,
  noCache,
  fallback,
  Component,
  onRefresh,
  onError,
  onClick,
  onFocus,
  onMouseOver,
  onTouchStart,
  children,
  ...props
}) {
  const { refresh, prefetch } = useClient();
  const { url: _url, outlet: _outlet } = useContext(FlightContext);

  const tryRefresh = useCallback(async () => {
    try {
      await refresh(
        target ||
          url ||
          (local ? _outlet || _url : root ? "PAGE_ROOT" : undefined),
        { noCache, fallback, Component, revalidate }
      );
      onRefresh?.();
    } catch (e) {
      onError?.(e);
    }
  }, [
    refresh,
    target,
    local,
    root,
    url,
    _outlet,
    _url,
    revalidate,
    noCache,
    fallback,
    Component,
    onRefresh,
    onError,
  ]);

  const handleRefresh = useCallback(
    async (e) => {
      e.preventDefault();
      onClick?.(e);
      if (transition !== false && !fallback) {
        startTransition(tryRefresh);
      } else {
        tryRefresh();
      }
    },
    [transition, fallback, onClick, tryRefresh]
  );

  const handlePrefetch = (handler) => (e) => {
    handler?.(e);
    if (prefetchEnabled === true) {
      prefetch(url || _url, {
        outlet: target || (local ? _outlet : root ? "PAGE_ROOT" : undefined),
        ttl,
        noCache,
        revalidate,
      });
    }
  };

  return (
    <a
      {...props}
      href={url}
      onClick={handleRefresh}
      onFocus={handlePrefetch(onFocus)}
      onMouseOver={handlePrefetch(onMouseOver)}
      onTouchStart={handlePrefetch(onTouchStart)}
    >
      {children}
    </a>
  );
}