import React, { forwardRef, useState, useRef } from "react";
import cls from "classnames";
import { useFloating, useInteractions, useClick, useFocus, useDismiss, useRole, FloatingArrow, arrow, offset, shift, flip, useHover, safePolygon, FloatingPortal, autoUpdate, limitShift } from "@floating-ui/react";
import { css } from "@emotion/react";
import { Slot } from "../../_Slot/Slot";
import { ARROW_HEIGHT, ARROW_PADDING, ARROW_POLYGON, ARROW_WIDTH } from "../Popover/Popover";
import { getFloatingPortalProps } from "../Popover/utils";
import { tokens, classes } from "./Tooltip.tokens";
import { base, Wrapper, IconWrapper } from "./Tooltip.styles";
export const tooltipRoot = (Root)=>/*#__PURE__*/ forwardRef(({ children, target, iconSlot, trigger = 'click', placement = 'bottom', hasTail = true, flip: outsideFlip = false, shift: outsideShift = false, offset: outerOffset = 0, delayOpen = 0, delayClose = 0, zIndex = 1000, className, style, size, view, portal, ...rest }, outerRootRef)=>{
        const [opened, setOpened] = useState(false);
        const arrowRef = useRef(null);
        const handleToggle = (opened)=>{
            setOpened(opened);
        };
        const { refs, floatingStyles, context } = useFloating({
            whileElementsMounted: autoUpdate,
            placement,
            open: opened,
            onOpenChange: handleToggle,
            middleware: [
                outsideShift && shift({
                    limiter: limitShift()
                }),
                outsideFlip && flip(),
                hasTail && arrow({
                    element: arrowRef,
                    padding: ARROW_PADDING
                }),
                offset((hasTail ? ARROW_HEIGHT : 0) + outerOffset)
            ]
        });
        const click = useClick(context, {
            enabled: trigger === 'click' || matchMedia('(hover: none)').matches
        });
        const focus = useFocus(context, {
            enabled: trigger === 'focus'
        });
        const dismiss = useDismiss(context, {
            enabled: true,
            outsidePress: true
        });
        const role = useRole(context);
        const hover = useHover(context, {
            mouseOnly: true,
            enabled: trigger === 'hover',
            handleClose: safePolygon({
                requireIntent: false
            }),
            delay: {
                open: delayOpen,
                close: delayClose
            }
        });
        const { getReferenceProps, getFloatingProps } = useInteractions([
            dismiss,
            role,
            click,
            hover,
            focus
        ]);
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Slot, {
            ref: refs.setReference,
            ...getReferenceProps()
        }, target), opened && /*#__PURE__*/ React.createElement(FloatingPortal, getFloatingPortalProps(portal), /*#__PURE__*/ React.createElement(Root, {
            ref: refs.setFloating,
            size: size,
            view: view,
            style: {
                ...floatingStyles,
                zIndex
            },
            ...getFloatingProps()
        }, /*#__PURE__*/ React.createElement(Wrapper, {
            ref: outerRootRef,
            className: cls(className, classes.tooltipRoot),
            style: style,
            "data-tooltip-open": opened,
            ...rest
        }, iconSlot && /*#__PURE__*/ React.createElement(IconWrapper, null, iconSlot), children, hasTail && /*#__PURE__*/ React.createElement(FloatingArrow, {
            ref: arrowRef,
            context: context,
            width: ARROW_WIDTH,
            height: ARROW_HEIGHT,
            fill: `var(${tokens.backgroundColor})`,
            d: ARROW_POLYGON
        })))));
    });
export const tooltipConfig = {
    name: 'Tooltip',
    tag: 'div',
    layout: tooltipRoot,
    base,
    variations: {
        view: {
            css: /*#__PURE__*/ css("css")
        },
        size: {
            css: /*#__PURE__*/ css("css")
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
