// @ts-nocheck
import { __assign, __read, __rest } from "tslib";
import './Tooltip.css';
import React, { useState } from 'react';
import { cn } from '../../utils/bem';
import { Popover } from '../Popover/Popover';
import { generateThemeClassNames, ThemeContext, useTheme } from '../Theme/Theme';
import { Typography } from '../Typography';
var ARROW_SIZE = 6;
var cnTooltip = cn('Tooltip');
export var tooltipPropSizes = ['m', 's', 'l'];
export var tooltipPropSizesDefault = tooltipPropSizes[0];
export var tooltipPropStatus = ['normal', 'alert', 'success', 'warning'];
function renderChildren(children) {
    return typeof children === 'string' || typeof children === 'number' ? (React.createElement(Typography.Text, { weight: "bold" }, children)) : (children);
}
export var Tooltip = React.forwardRef(function (props, ref) {
    var _a;
    var children = props.children, _b = props.size, size = _b === void 0 ? tooltipPropSizesDefault : _b, className = props.className, status = props.status, onSetDirectionProp = props.onSetDirection, style = props.style, staticPosition = props.staticPosition, directionPosition = props.directionPosition, opacity = props.opacity, view = props.view, rest = __rest(props, ["children", "size", "className", "status", "onSetDirection", "style", "staticPosition", "directionPosition", "opacity", "view"]);
    var theme = useTheme().theme;
    var _c = __read(useState(undefined), 2), direction = _c[0], setDirection = _c[1];
    var tooltipTheme = status
        ? __assign(__assign({}, theme), { color: {
                primary: theme.color.primary
            } }) : __assign(__assign({}, theme), { color: {
            primary: theme.color.primary
        } });
    var tooltipThemeClassNames = generateThemeClassNames(tooltipTheme);
    var onSetDirection = function (direction) {
        onSetDirectionProp && onSetDirectionProp(direction);
        setDirection(direction);
    };
    if (staticPosition) {
        return (React.createElement("div", __assign({}, rest, { ref: ref, className: cnTooltip({ status: status, staticPosition: staticPosition, view: view, size: size }, [className]), style: __assign({}, style) }),
            React.createElement("div", { className: cnTooltip('Background') }),
            React.createElement("div", { className: cnTooltip('Arrow', { direction: directionPosition }) }),
            React.createElement("div", { className: cnTooltip('Content', { size: size }) }, renderChildren(children))));
    }
    return (React.createElement(ThemeContext.Provider, { value: { theme: tooltipTheme, themeClassNames: tooltipThemeClassNames } },
        React.createElement(Popover, __assign({}, rest, { offset: ARROW_SIZE + 10, onSetDirection: onSetDirection, ref: ref, className: cnTooltip({ status: status }, [className]), style: __assign((_a = {}, _a['--tooltip-arrow-size'] = "".concat(ARROW_SIZE, "px"), _a), style) }),
            React.createElement("div", { className: cnTooltip('Background') }),
            React.createElement("div", { className: cnTooltip('Arrow', { direction: direction }) }),
            React.createElement("div", { className: cnTooltip('Content', { size: size }) }, renderChildren(children)))));
});
