import React, { Component, Fragment } from 'react';
import { SoftHeaderSectionItemButton, SoftPopover, SoftButton, SoftAvatar, SoftSelectable, SoftPopoverTitle, SoftPopoverFooter, } from '../../components';
export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {
            spaces: this.spaces,
            selectedSpace: this.spaces.filter((option) => option.checked)[0],
            isOpen: false,
        };
        this.isListExtended = () => {
            return this.state.spaces.length > 4 ? true : false;
        };
        this.onMenuButtonClick = () => {
            this.setState({
                isOpen: !this.state.isOpen,
            });
        };
        this.closePopover = () => {
            this.setState({
                isOpen: false,
            });
        };
        this.onChange = options => {
            this.setState({
                spaces: options,
                selectedSpace: options.filter(option => option.checked)[0],
                isOpen: false,
            });
        };
        this.addMoreSpaces = () => {
            this.setState({
                spaces: this.spaces.concat(this.additionalSpaces),
            });
        };
        this.spaces = [
            {
                label: 'Sales team',
                prepend: React.createElement(SoftAvatar, { type: "space", name: "Sales Team", size: "s" }),
                checked: 'on'
            },
            {
                label: 'Engineering',
                prepend: React.createElement(SoftAvatar, { type: "space", name: "Engineering", size: "s" }),
            },
            {
                label: 'Security',
                prepend: React.createElement(SoftAvatar, { type: "space", name: "Security", size: "s" }),
            },
            {
                label: 'Default',
                prepend: React.createElement(SoftAvatar, { type: "space", name: "Default", size: "s" }),
            },
        ];
        this.additionalSpaces = [
            {
                label: 'Sales team 2',
                prepend: React.createElement(SoftAvatar, { type: "space", name: "Sales Team 2", size: "s" }),
            },
            {
                label: 'Engineering 2',
                prepend: React.createElement(SoftAvatar, { type: "space", name: "Engineering 2", size: "s" }),
            },
            {
                label: 'Security 2',
                prepend: React.createElement(SoftAvatar, { type: "space", name: "Security 2", size: "s" }),
            },
            {
                label: 'Default 2',
                prepend: React.createElement(SoftAvatar, { type: "space", name: "Default 2", size: "s" }),
            },
        ];
    }
    render() {
        const { selectedSpace, isOpen, spaces } = this.state;
        const button = (React.createElement(SoftHeaderSectionItemButton, { "aria-controls": "headerSpacesMenuList", "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": "Apps menu", onClick: this.onMenuButtonClick }, selectedSpace.prepend));
        return (React.createElement(SoftPopover, { id: "headerSpacesMenu", ownFocus: true, button: button, isOpen: isOpen, anchorPosition: "downLeft", closePopover: this.closePopover, panelPaddingSize: "none" },
            React.createElement(SoftSelectable, { searchable: this.isListExtended(), searchProps: {
                    placeholder: 'Find a space',
                    compressed: true,
                }, options: spaces, singleSelection: "always", style: { width: 300 }, onChange: this.onChange, listProps: {
                    rowHeight: 40,
                    showIcons: false,
                } }, (list, search) => (React.createElement(Fragment, null,
                React.createElement(SoftPopoverTitle, null, search || 'Your spaces'),
                list,
                React.createElement(SoftPopoverFooter, null,
                    React.createElement(SoftButton, { size: "s", fullWidth: true, onClick: this.addMoreSpaces, disabled: this.isListExtended() }, "Add more spaces")))))));
    }
}
//# sourceMappingURL=header_spaces_menu.js.map