import React, { useEffect, forwardRef, useState } from "react";
import styled from "styled-components";
import { component } from "../../engines";
import { cx } from "../../utils";
import { popoverConfig, popoverTokens } from "../Popover";
import { useDelayedTooltip } from "./hooks";
import { StyledContentLeft, TooltipRoot } from "./Tooltip.styles";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { tokens } from "./Tooltip.tokens";
const ESCAPE_KEYCODE = 27;
const getStringValue = (value)=>{
    return typeof value === 'number' ? `${value}rem` : value;
};
const Popover = component(popoverConfig);
const StyledPopover = styled(Popover).withConfig({
    displayName: "Tooltip__StyledPopover",
    componentId: "sc-1fef1a42-0"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], popoverTokens.arrowMaskWidth, tokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, tokens.arrowMaskHeight, popoverTokens.arrowMaskImage, tokens.arrowMaskImage, popoverTokens.arrowBackground, tokens.arrowBackground, popoverTokens.arrowHeight, tokens.arrowHeight, popoverTokens.arrowEdgeMargin, tokens.arrowEdgeMargin);
/**
 * Компонент для текстовых подсказок. Основное предназначение — подписи к блокам.
 */ export const tooltipRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, text, opened, isVisible, isOpen, hasArrow = true, arrow, animated, offset = [
        3,
        8
    ], minWidth, maxWidth, placement = 'bottom', usePortal = true, target, children, onDismiss, view, size, contentLeft, zIndex = '9200', className, style, hoverTimeout, mouseEnterDelay = 0, mouseLeaveDelay, trigger, ...rest }, outerRef)=>{
        const [ref, setRef] = useState(null);
        mouseLeaveDelay = mouseLeaveDelay ?? hoverTimeout ?? 300;
        const { opened: openedState, showTooltip, hideTooltip, setOpened } = useDelayedTooltip(mouseEnterDelay, mouseLeaveDelay);
        const isTooltipOpened = Boolean(text) && (isVisible || isOpen || opened || openedState);
        useEffect(()=>{
            const onKeyDown = (event)=>{
                if (event.keyCode === ESCAPE_KEYCODE) {
                    onDismiss?.();
                }
            };
            window.addEventListener('keydown', onKeyDown);
            return ()=>{
                window.removeEventListener('keydown', onKeyDown);
            };
        }, []);
        const onToggle = (isOpen)=>{
            if (trigger === 'hover') {
                if (isOpen) {
                    showTooltip();
                } else {
                    hideTooltip();
                }
            } else {
                setOpened(isOpen);
            }
        };
        return /*#__PURE__*/ React.createElement(StyledPopover, {
            opened: isTooltipOpened,
            placement: placement,
            offset: offset,
            zIndex: zIndex,
            target: target || children,
            usePortal: usePortal,
            hasArrow: arrow || hasArrow,
            "aria-hidden": !isTooltipOpened,
            "aria-live": "polite",
            role: "tooltip",
            animated: animated,
            className: cx(ref?.classList.toString()),
            ...(trigger === 'hover' || trigger === 'click') && {
                trigger,
                onToggle
            },
            ...rest
        }, /*#__PURE__*/ React.createElement(Root, {
            view: view,
            size: size,
            ref: setRef,
            className: className,
            style: style
        }, /*#__PURE__*/ React.createElement(TooltipRoot, {
            ref: outerRef,
            id: id,
            maxWidth: getStringValue(maxWidth),
            minWidth: getStringValue(minWidth)
        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), text)));
    });
export const tooltipConfig = {
    name: 'Tooltip',
    tag: 'div',
    layout: tooltipRoot,
    base: '',
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
