/*jshint browser:true */
/*globals React, App */

(function () {
    'use strict';

    /**
     * Modal for managing channels
     *
     * @prop {channels: Array}  List of channels
     * @prop {open: func}       Called to open the window
     * @prop {close: func}      Called to close the window
     */
    App.components.modal('Channel', {
        displayName: 'Board',
        mixins: [React.addons.PureRenderMixin],
        
        propTypes: {
            channels: React.PropTypes.array,
            
            open: React.PropTypes.func,
            close: React.PropTypes.func
        },

        getDefaultProps: function () {
            return {
                channels: [],
                
                open: function () {},
                close: function () {}
            };
        },

        /**
         * Render modal
         */
        render: function () {
            var title = 'Instruments', channels;
            
            channels = this.props.channels.map(function (channel) {
                channel.key = 'channel-' + channel.id;
                return App.components.Channel.Channel(channel);
            });
            
            return React.DOM.form({
                className: 'vex-dialog-form channels'
            }, [
                React.DOM.h4({
                    key: 'title',
                    className: 'main-title'
                }, title),
                React.DOM.ul({
                    key: 'channels'
                }, channels)
            ]);
        }
    });
}());