import React from 'react';
import { NavItem, Collapse } from 'react-bootstrap';
import Fa from './fa';

import './command-bar.less';

export default class CommandBar extends React.Component {

    constructor(props) {
        super(props);
        this.clickItem = this.clickItem.bind(this);
    }

    componentWillMount() {
        this.state = { show: true };
    }

    clickItem(item) {
        return () => {
            if (item.onClick) {
                item.onClick(item);
            } else {
                this.setState({ item: item === this.state.item ? null : item });
            }
        };
    }

    renderItem(item, index) {
        if (item.node) {
            return item.node;
        }

        // if empty should not return null
        if (item.visible === false) {
            return null;
        }

        return React.createElement(
            'li',
            { key: index, role: 'presentation' },
            React.createElement(
                'a',
                { onClick: this.clickItem(item) },
                React.createElement(Fa, { icon: item.icon }),
                item.title
            ),
            item.submenu && React.createElement(
                Collapse,
                { 'in': item === this.state.item },
                React.createElement(
                    'ul',
                    { className: 'cmd-bar-sub nav' },
                    item.submenu.map((cmd, i) => {
                        // if empty should not return null
                        if (cmd.visible === false) {
                            return null;
                        }

                        return React.createElement(
                            NavItem,
                            { key: cmd.key ? cmd.key : i, onClick: this.clickItem(cmd) },
                            cmd.icon && React.createElement(Fa, { icon: cmd.icon }),
                            cmd.title
                        );
                    })
                )
            )
        );
    }

    render() {
        const cmds = this.props.commands;
        if (!cmds) {
            return null;
        }

        return React.createElement(
            'ul',
            { className: 'cmd-bar nav' },
            cmds.map((item, index) => this.renderItem(item, index))
        );
    }
}

CommandBar.propTypes = {
    commands: React.PropTypes.array
};