import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Menu, MenuItem } from "@material-ui/core";
import styled from 'styled-components';
import { DropdownWhiteIcon } from '../Icon/DropdownWhiteIcon';
import { WhiteStyledButton } from '../BuildUI/Button';
export const DropdownMenu = (props) => {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    return (_jsxs("div", { children: [_jsx(WhiteStyledButton, Object.assign({ "aria-controls": props.id || 'dropdown_menu', "aria-haspopup": "true", onClick: handleClick, endIcon: _jsx(DropdownWhiteIcon, {}, void 0) }, { children: props.title }), void 0),
            _jsx(StyledMenu, Object.assign({ id: props.id, anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: {
                    vertical: 'bottom',
                    horizontal: 'center',
                }, elevation: 0, getContentAnchorEl: null, transformOrigin: {
                    vertical: 'top',
                    horizontal: 'center',
                } }, { children: props.items.map((item, idx) => (_jsx(MenuItem, Object.assign({ onClick: handleClose }, { children: item.renderUI() }), idx))) }), void 0)] }, void 0));
};
export const StyledMenu = styled(Menu) `
    && {
        .MuiMenu-list {
            padding: 8px;
        }
    }  
`;
//# sourceMappingURL=DropdownMenu.js.map