import { forwardRef } from "react";
import {
  StyledArrow,
  StyledContent,
  StyledPortal,
  StyledProvider,
  StyledRoot,
  StyledTrigger,
} from "./tooltip.styled";

interface TooltipProps extends React.ComponentProps<typeof StyledProvider> {
  trigger: React.ReactNode;
  children: string;
  delayDuration?: number;
  rootProps?: Omit<React.ComponentProps<typeof StyledRoot>, "delayDuration">;
  triggerProps?: React.ComponentProps<typeof StyledTrigger>;
  portalProps?: React.ComponentProps<typeof StyledPortal>;
  contentProps?: Omit<React.ComponentProps<typeof StyledContent>, "css">;
  arrowProps?: React.ComponentProps<typeof StyledArrow>;
}

/**
 * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 */
export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
  const {
    trigger,
    children,
    css,
    delayDuration = 200,
    rootProps,
    triggerProps,
    portalProps,
    contentProps,
    arrowProps,
    ...providerProps
  } = props;

  return (
    <StyledProvider {...providerProps}>
      <StyledRoot delayDuration={delayDuration} {...rootProps}>
        <StyledTrigger asChild={true} {...triggerProps}>
          {trigger}
        </StyledTrigger>
        <StyledPortal {...portalProps}>
          <StyledContent ref={ref} sideOffset={4} {...contentProps} css={css}>
            {children}
            <StyledArrow {...arrowProps} />
          </StyledContent>
        </StyledPortal>
      </StyledRoot>
    </StyledProvider>
  );
});

Tooltip.displayName = "Tooltip";