import {forwardRef, AnchorHTMLAttributes} from 'react'

import {useHref} from 'react-router'

import {useNavigateWithTransition} from '../../hooks/navigation/useNavigateWithTransition'

type TransitionLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
  to: string
}

const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i

export const TransitionLink = forwardRef<
  HTMLAnchorElement,
  TransitionLinkProps
>(({onClick, to, children, ...props}, forwardedRef) => {
  const transitionNavigate = useNavigateWithTransition()

  const isAbsolute = typeof to === 'string' && ABSOLUTE_URL_REGEX.test(to)

  if (isAbsolute) {
    console.warn(
      `TransitionLink: absolute URLs are not supported. Please update to a valid relative path.`
    )
  }

  const href = useHref(to)

  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    if (onClick) onClick(event)

    if (!event.defaultPrevented) {
      event.preventDefault()
      transitionNavigate(to)
    }
  }

  return (
    <a
      {...props}
      onClick={handleClick}
      href={isAbsolute ? undefined : href}
      ref={forwardedRef}
    >
      {children}
    </a>
  )
})
