import React, { Component, } from 'react';
import classNames from 'classnames';
import { SoftIcon } from '../../Icon';
import { SoftPopover } from '../../Popover';
import { SoftI18n } from '../../I18n';
import { SoftHeaderSectionItemButton, SoftHeaderSectionItem } from '../header_section';
export class SoftHeaderLinks 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 { children, className, ...rest } = this.props;
        const classes = classNames('softHeaderLinks', className);
        const button = (React.createElement(SoftHeaderSectionItem, { border: "left" },
            React.createElement(SoftI18n, { token: "softHeaderLinks.openNavigationMenu", default: "Open navigation menu" }, openNavigationMenu => (React.createElement(SoftHeaderSectionItemButton, { "aria-label": openNavigationMenu, onClick: this.onMenuButtonClick },
                React.createElement(SoftIcon, { type: "apps", size: "m" }))))));
        return (React.createElement(SoftI18n, { token: "softHeaderLinks.appNavigation", default: "App navigation" }, appNavigation => (React.createElement("nav", Object.assign({ className: classes, "aria-label": appNavigation }, rest),
            React.createElement("div", { className: "softHeaderLinks__list", role: "navigation" }, children),
            React.createElement(SoftPopover, { className: "softHeaderLinks__mobile", ownFocus: true, button: button, isOpen: this.state.isOpen, anchorPosition: "downRight", closePopover: this.closeMenu, panelClassName: "softHeaderLinks__mobileList", panelPaddingSize: "none" }, children)))));
    }
}
//# sourceMappingURL=SoftHeaderLinks.js.map