/**
 * 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 { Badge } from 'react-bootstrap';
import { isFunction } from '../commons/utils';

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

export default class Sideview extends React.Component {

    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;
    }

    /**
     * Get the selected item
     */
    getSelected() {
        const forpath = this.props.route.forpath;
        const items = this.props.views;

        return forpath ? items.find(it => it.path === forpath) : items.find(it => it.default);
    }

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

        if (!views) {
            return null;
        }

        return React.createElement(
            'ul',
            { className: 'sideview nav' },
            views.map((item, index) => {
                if (item.noResultMsg) {
                    const title = item.title ? item.title : React.createElement('hr', null);

                    return React.createElement(
                        'span',
                        { key: index },
                        React.createElement(
                            'li',
                            { className: 'disabled' },
                            title
                        ),
                        React.createElement(
                            'div',
                            { className: 'message-muted' },
                            React.createElement('i', { className: 'fa fa-fw fa-' + item.icon }),
                            React.createElement(
                                'div',
                                null,
                                item.noResultMsg
                            )
                        )
                    );
                }

                if (!item.path) {
                    const title = item.title ? item.title : React.createElement('hr', null);
                    return React.createElement(
                        'li',
                        { key: index, className: 'disabled' },
                        title
                    );
                }

                return React.createElement(
                    'li',
                    { key: index, role: 'presentation' },
                    React.createElement(
                        'a',
                        { href: this.hash(item), className: item.className },
                        item.icon && React.createElement('i', { className: 'fa fa-fw fa-' + item.icon }),
                        !!item.count && React.createElement(
                            Badge,
                            { pullRight: true },
                            item.count
                        ),
                        item.title
                    )
                );
            })
        );
    }
}

Sideview.propTypes = {
    views: React.PropTypes.array.isRequired,
    route: React.PropTypes.object.isRequired,
    queryParams: React.PropTypes.object
};