"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledPopover = void 0;
var material_1 = require("@mui/material");
var Popover_1 = __importDefault(require("@mui/material/Popover"));
var colors_1 = require("../../base/colors");
var react_1 = __importDefault(require("react"));
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var pro_regular_svg_icons_1 = require("@fortawesome/pro-regular-svg-icons");
var styles_1 = require("@mui/styles");
var Flex_1 = require("../Flex");
var useStyles = styles_1.makeStyles(function () { return ({
    closeButton: {
        "&:hover": {
            backgroundColor: "transparent",
        },
    },
}); });
exports.StyledPopover = styles_1.withStyles(function () {
    return styles_1.createStyles({
        root: {
            borderRadius: 4,
            marginTop: 10,
            padding: 0,
            "& h4": {
                marginTop: 10,
                marginBottom: 0,
            },
        },
        paper: {
            maxWidth: 400,
            minWidth: 174,
            padding: 20,
            border: "1px solid " + colors_1.green.light,
            display: "flex",
            flexDirection: "column",
            boxShadow: "1px 4px 12px rgba(174, 193, 193, 0.6)",
        },
    });
})(Popover_1.default);
function Popover(_a) {
    var anchor = _a.anchor, open = _a.open, setOpen = _a.setOpen, _b = _a.horizontalTransform, horizontalTransform = _b === void 0 ? false : _b, title = _a.title, subtitle = _a.subtitle, subHeader = _a.subHeader, anchorOrigin = _a.anchorOrigin, transformOrigin = _a.transformOrigin, children = _a.children, _c = _a.onClose, onClose = _c === void 0 ? function () { return setOpen(false); } : _c, props = __rest(_a, ["anchor", "open", "setOpen", "horizontalTransform", "title", "subtitle", "subHeader", "anchorOrigin", "transformOrigin", "children", "onClose"]);
    var classes = useStyles();
    return (react_1.default.createElement(exports.StyledPopover, __assign({ open: open, anchorEl: anchor, onClose: onClose, anchorOrigin: anchorOrigin
            ? anchorOrigin
            : {
                vertical: "bottom",
                horizontal: "right",
            }, transformOrigin: transformOrigin
            ? transformOrigin
            : {
                vertical: "top",
                horizontal: horizontalTransform ? "left" : "right",
            } }, props),
        react_1.default.createElement(Flex_1.Flex, { justifyContent: "space-between", alignItems: "flex-start" },
            react_1.default.createElement(Flex_1.Flex, { column: true, id: "title" },
                react_1.default.createElement(material_1.Typography, { variant: "h4" },
                    react_1.default.createElement("b", null, title)),
                subtitle && (react_1.default.createElement("p", null,
                    react_1.default.createElement(material_1.Typography, { variant: "body1" }, subtitle)))),
            react_1.default.createElement(material_1.Box, { pl: 2 },
                react_1.default.createElement(material_1.IconButton, { "aria-label": "close-popover", className: classes.closeButton, onClick: function () { return setOpen(false); }, size: "small" },
                    react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: pro_regular_svg_icons_1.faTimes, style: { color: colors_1.green.standard } })))),
        react_1.default.createElement(Flex_1.Flex, { column: true, pb: 2 }, subHeader),
        react_1.default.createElement(material_1.Divider, null),
        react_1.default.createElement(material_1.Box, { pt: 2 }, children)));
}
exports.default = Popover;
//# sourceMappingURL=Popover.js.map