import React, { Component, } from 'react';
import { SoftAvatar, SoftFlexGroup, SoftFlexItem, SoftHeaderAlert, SoftHeaderSectionItemButton, SoftNotificationBadge, SoftLink, SoftText, SoftSpacer, SoftPopover, } from '../../components';
export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
        };
        this.onMenuButtonClick = () => {
            this.setState({
                isOpen: !this.state.isOpen,
            });
        };
        this.closeMenu = () => {
            this.setState({
                isOpen: false,
            });
        };
    }
    render() {
        const button = (React.createElement(SoftHeaderSectionItemButton, { "aria-controls": "headerUserMenu", "aria-expanded": this.state.isOpen, "aria-haspopup": "true", "aria-label": "Account menu", onClick: this.onMenuButtonClick },
            React.createElement(SoftAvatar, { name: "John Username", size: "s" }),
            React.createElement(SoftNotificationBadge, { className: "softHeaderNotification" }, "3")));
        return (React.createElement(SoftPopover, { id: "headerUserMenu", ownFocus: true, button: button, isOpen: this.state.isOpen, anchorPosition: "downRight", closePopover: this.closeMenu, panelPaddingSize: "none" },
            React.createElement("div", { style: { width: 320 } },
                React.createElement(SoftFlexGroup, { gutterSize: "m", className: "softHeaderProfile", responsive: false },
                    React.createElement(SoftFlexItem, { grow: false },
                        React.createElement(SoftAvatar, { name: "John Username", size: "xl" })),
                    React.createElement(SoftFlexItem, null,
                        React.createElement(SoftText, null,
                            React.createElement("p", null, "John Username")),
                        React.createElement(SoftSpacer, { size: "m" }),
                        React.createElement(SoftFlexGroup, null,
                            React.createElement(SoftFlexItem, null,
                                React.createElement(SoftFlexGroup, { justifyContent: "spaceBetween" },
                                    React.createElement(SoftFlexItem, { grow: false },
                                        React.createElement(SoftLink, { href: "" }, "Edit profile")),
                                    React.createElement(SoftFlexItem, { grow: false },
                                        React.createElement(SoftLink, { href: "" }, "Log out"))))))),
                React.createElement(SoftHeaderAlert, { title: "Here\u2019s a notification title", text: "I am the hat judge. Show me a hat and I will tell you if it\u2019s a good hat or bad hat.", date: "Nov. 14, 02:14PM." }),
                React.createElement(SoftHeaderAlert, { title: "Here\u2019s a notification title that is extremely long and will wrap", text: "I am the hat judge. Show me a hat and I will tell you if it\u2019s a good hat or bad hat.", action: React.createElement(SoftLink, { href: "#" }, "Download your thing here"), date: "Nov. 14, 02:14PM." }),
                React.createElement(SoftHeaderAlert, { title: "Here\u2019s a notification title", text: "I am the hat judge. Show me a hat and I will tell you if it\u2019s a good hat or bad hat.", action: React.createElement(SoftLink, { href: "#" }, "Download your thing here"), date: "Nov. 14, 02:14PM." }))));
    }
}
//# sourceMappingURL=header_user_menu.js.map