"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledMenu = exports.UIDropdownMenu = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ArrowRight_1 = tslib_1.__importDefault(require("@mui/icons-material/ArrowRight"));
const DropdownWhiteIcon_1 = require("../Icon/DropdownWhiteIcon");
const Button_1 = require("../BuilderUI/Button");
const UIConstant_1 = require("../BuilderUI/UIConstant");
const UIDropdownMenu = (props) => {
    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.WhiteStyledButton, { "aria-controls": props.id || "dropdown_menu", "aria-haspopup": "true", onClick: handleClick, endIcon: props.direction === "right" ? (0, jsx_runtime_1.jsx)(ArrowRight_1.default, {}) : (0, jsx_runtime_1.jsx)(DropdownWhiteIcon_1.DropdownWhiteIcon, {}), children: props.title }), (0, jsx_runtime_1.jsx)(exports.StyledMenu, { id: props.id, anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: props.ahchorOrigin || {
                    vertical: "bottom",
                    horizontal: "center",
                }, getContentAnchorEl: null, transformOrigin: props.transformOrigin || {
                    vertical: "top",
                    horizontal: "center",
                }, children: (0, jsx_runtime_1.jsx)("div", { children: props.items.map((item, idx) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: item.renderUI() }, idx))) }) })] }));
};
exports.UIDropdownMenu = UIDropdownMenu;
exports.StyledMenu = (0, styled_components_1.default)(core_1.Menu) `
    && {
        .MuiMenu-list {
            min-width: 100px;

            > div {
                display: flex;
                flex-direction: column;

                .MuiButtonBase-root {
                    justify-content: space-between;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 17px;

                    color: ${UIConstant_1.UIConstant.main_text_color};
                }
            }
        }
    }
`;
//# sourceMappingURL=UIDropdownMenu.js.map