var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useState } from 'react';
import classnames from 'classnames';
import Paper from '@mui/material/Paper';
import Fade from '@mui/material/Fade';
import { Popper } from '../Popper';
import { useStyles } from './styles';
export var PopupWithArrow = function (_a) {
    var children = _a.children, className = _a.className, classes = _a.classes, transition = _a.transition, otherProps = __rest(_a, ["children", "className", "classes", "transition"]);
    var styles = useStyles();
    var AnimationWrapper = transition ? Fade : React.Fragment;
    var _b = useState(null), arrowRef = _b[0], setArrowRef = _b[1];
    return (React.createElement(Popper, __assign({ className: classnames(styles.popper, className), modifiers: [
            {
                name: 'preventOverflow',
                enabled: true,
                options: {
                    rootBoundary: 'viewport',
                    padding: 14,
                    altAxis: true
                }
            },
            {
                name: 'arrow',
                enabled: true,
                options: {
                    element: arrowRef,
                    padding: 4
                }
            }
        ], transition: transition, excludeAnchorFromBackdrop: false }, otherProps), function (_a) {
        var TransitionProps = _a.TransitionProps;
        return (React.createElement(AnimationWrapper, __assign({}, TransitionProps),
            React.createElement(Paper, { className: classnames(styles.paper, classes === null || classes === void 0 ? void 0 : classes.root) },
                React.createElement("span", { className: classnames(styles.arrow, classes === null || classes === void 0 ? void 0 : classes.arrow), ref: setArrowRef }),
                children)));
    }));
};
