import React, { useState } from 'react';
import { useFloating, offset, shift, flip, arrow, Placement, Middleware } from '@floating-ui/react';

export type TooltipProps = {
  content: React.ReactNode;
  placement?: Placement;
  children: React.ReactElement<any>;
  className?: string;
};

/**
 * Minimal tooltip using floating-ui.
 */
export function Tooltip({ content, placement = 'top', children, className = '' }: TooltipProps) {
  const [open, setOpen] = useState(false);
  const [arrowEl, setArrowEl] = useState<HTMLElement | null>(null);

  const middleware: Middleware[] = [offset(8), flip(), shift()];
  if (arrowEl) middleware.push(arrow({ element: arrowEl }));

  const { x, y, refs, strategy, middlewareData, placement: finalPlacement } = useFloating({
    open,
    onOpenChange: setOpen,
    placement,
    middleware
  });

  const staticSide = {
    top: 'bottom',
    right: 'left',
    bottom: 'top',
    left: 'right'
  }[finalPlacement.split('-')[0]] as string;

  return (
    <>
      {React.cloneElement(children, {
        ref: refs.setReference,
        onMouseEnter: () => setOpen(true),
        onMouseLeave: () => setOpen(false),
        onFocus: () => setOpen(true),
        onBlur: () => setOpen(false)
      })}
      {open ? (
        <div
          ref={refs.setFloating}
          className={['tooltip bs-tooltip-auto show', className].filter(Boolean).join(' ')}
          role="tooltip"
          style={{
            position: strategy,
            top: y ?? 0,
            left: x ?? 0
          }}
        >
          <div className="tooltip-inner">{content}</div>
          <div
            ref={setArrowEl as any}
            className="tooltip-arrow"
            style={{
              left: middlewareData.arrow?.x,
              top: middlewareData.arrow?.y,
              [staticSide]: '-4px'
            }}
          />
        </div>
      ) : null}
    </>
  );
}
