/* Copyright 2026 Marimo. All rights reserved. */

import { Tooltip as TooltipPrimitive } from "radix-ui";
import * as React from "react";
import { StyleNamespace } from "@/theme/namespace";
import { cn } from "@/utils/cn";
import { withFullScreenAsRoot, withSmartCollisionBoundary } from "./fullscreen";

const TooltipProvider = ({
  delayDuration = 400,
  ...props
}: TooltipPrimitive.TooltipProviderProps) => (
  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
);

const TooltipPortal = withFullScreenAsRoot(TooltipPrimitive.Portal);

const TooltipRoot = TooltipPrimitive.Root;
const InternalTooltipContent = withSmartCollisionBoundary(
  TooltipPrimitive.Content,
);

const TooltipTrigger = TooltipPrimitive.Trigger;

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <StyleNamespace>
    <InternalTooltipContent
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-xs data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
        className,
      )}
      {...props}
    />
  </StyleNamespace>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;

const Tooltip: React.FC<
  {
    content: React.ReactNode;
    usePortal?: boolean;
    children: React.ReactNode;
    asChild?: boolean;
    side?: TooltipPrimitive.TooltipContentProps["side"];
    tabIndex?: number;
    align?: TooltipPrimitive.TooltipContentProps["align"];
  } & React.ComponentPropsWithoutRef<typeof TooltipRoot>
> = ({
  content,
  children,
  usePortal = true,
  asChild = true,
  tabIndex,
  side,
  align,
  ...rootProps
}) => {
  if (content == null || content === "") {
    return children;
  }

  return (
    <TooltipRoot disableHoverableContent={true} {...rootProps}>
      <TooltipTrigger asChild={asChild} tabIndex={tabIndex}>
        {children}
      </TooltipTrigger>
      {usePortal ? (
        <TooltipPortal>
          <TooltipContent side={side} align={align}>
            {content}
          </TooltipContent>
        </TooltipPortal>
      ) : (
        <TooltipContent side={side} align={align}>
          {content}
        </TooltipContent>
      )}
    </TooltipRoot>
  );
};

export {
  Tooltip,
  TooltipRoot,
  TooltipTrigger,
  TooltipContent,
  TooltipPortal,
  TooltipProvider,
};