/*
 *  Header Component
 *  
 *  var menus = [{text: '', link: ''}]
 *  var onClick = function(e) { }
 *  
 *  // using Header component as following.
 *
 *  <Header menus={menus} onClick={onClick.bind(this)} className='header'/>
 */

var classnames  =   require('classnames'),
    Link        =   require('react-router-component').Link,

    // import custom style
    styles      =   require('./style');

module.exports = React.createClass({
    // component name
    displayName: 'Header',

    // props constrains
    propTypes: {
        className: React.PropTypes.string,
        menus:React.PropTypes.arrayOf(React.PropTypes.shape({
            text: React.PropTypes.string,
            link: React.PropTypes.string
        })),
        onClick: React.PropTypes.func
    },
    
    // default state defination
    getInitialState: function() {
        return {
            activeIndex: 0 
        }
    },

    // click event handler
    onMenuClick: function(index, e) {
        this.props.onClick && this.props.onClick(index, e);
        this.setState({
            activeIndex: index
        });
    },

    // view render
    render: function() {
        // current active index
        var activeIndex = this.state.activeIndex;
        
        // combine classname with active
        var menuClass = function(index) {
            var activeClassname = {};
            activeClassname[styles['active']] = (index === activeIndex);
            return classnames(styles['nav-item'], activeClassname)
        }

        var menus = this.props.menus;

        return (
            <header>
                <ul className={classnames(styles['nav'], this.props.className)}>
                {
                    menus.map(function(menu, index) {
                        return <li key={index} className={menuClass(index)}>
                            <Link href={menu.link} onClick={this.onMenuClick.bind(this, index)}>
                                { menu.text }
                            </Link>
                        </li>
                    }.bind(this))
                }
                </ul>
            </header>
        )
    }
});