/**
 * React component that displays a side bar - a verftical bar aligned to the left taking the whole space
 *
 *  @author Ricardo Memoria
 *  nov-2015
 */

import React from 'react';
import { Nav, NavItem } from 'react-bootstrap';
import { isFunction } from '../commons/utils';

// load style
import './sidebar.less';

export default class Sidebar extends React.Component {

    itemClick(item) {
        if (this.props.onSelect) {
            this.props.onSelect(item);
        }

        if (!item.path) {
            return;
        }

        window.location.hash = this.props.path + item.path;
    }

    hash(item) {
        const hash = this.props.route.path + item.path;

        // check if there is any query params
        let qry = this.props.queryParams;
        if (isFunction(qry)) {
            qry = qry(item);
        }

        qry = qry ? '?' + Object.keys(qry).map(p => p + '=' + encodeURIComponent(qry[p])).join('&') : '';

        return '#' + hash + qry;
    }

    render() {
        // get the items to fill in the sidebar
        const items = this.props.items || [];

        console.log('sidebar = ', this.props.queryParams);

        return React.createElement(
            'div',
            { className: 'sidebar' },
            React.createElement(
                Nav,
                { activeKey: this.props.selected },
                items.map((item, index) => {
                    if (item.separator) {
                        return React.createElement(
                            NavItem,
                            { disabled: true, key: index },
                            React.createElement('hr', null)
                        );
                    }

                    return React.createElement(
                        NavItem,
                        { eventKey: item, key: index, href: this.hash(item) },
                        item.icon && React.createElement('i', { className: 'fa fa-fw fa-' + item.icon }),
                        item.title
                    );
                })
            )
        );
    }
}

Sidebar.propTypes = {
    items: React.PropTypes.array,
    onSelect: React.PropTypes.func,
    selected: React.PropTypes.object,
    path: React.PropTypes.string,
    route: React.PropTypes.object,
    queryParams: React.PropTypes.any
};