'use strict';

var React = require('react/addons');
var TreeView = require('react-treeview');
var _ = require('underscore');
var dataSource = [
    {
        type: 'Employees',
        collapsed: false,
        people: [
            {name: 'Paul Gordon', age: 25, sex: 'male', role: 'coder', collapsed: false},
            {name: 'Sarah Lee', age: 23, sex: 'female', role: 'jqueryer', collapsed: false}
        ]
    },
    {
        type: 'CEO',
        collapsed: false,
        people: [
            {name: 'Drew Anderson', age: 35, sex: 'male', role: 'boss', collapsed: false}
        ]
    }
];
require('styles/GeoList.less');

function getCategoriesState (categories, geoObjects) {
    var categoriesWithObjects = [];
    _.each(categories, function (value) {
        categoriesWithObjects.push({
            name: value,
            collapsed: false,
            geoObjects: _.where(geoObjects, {category:value})
        });
    });
    return {
        categoriesWithObjects: categoriesWithObjects
    }
}

var GeoList = React.createClass({
    getInitialState: function() {
        return getCategoriesState(this.props.categories, this.props.geoObjects);
    },
    render: function () {
        return (

            <div className="left_col">

                <div className="tabs">

                    <div className="tab">
                        <input type="radio" id="tab-categories" name="tab-group-1" defaultChecked/>
                        <label htmlFor="tab-categories">Категории</label>

                        <div className="content">
                            {this.state.categoriesWithObjects.map(function(node, index) {
                                var type = node.name;
                                var label = <span className="node">{type}</span>;
                                return (
                                    <TreeView key={type + '|' + index} nodeLabel={label} defaultCollapsed={false}>
                                        {node.geoObjects.map(function(geoObject) {
                                            return (
                                                <a className="node" href="#">{geoObject.name}</a>
                                            );
                                        })}
                                    </TreeView>
                                );
                            }, this)}
                        </div>
                    </div>

                    <div className="tab">
                        <input type="radio" id="tab-search" name="tab-group-1"/>
                        <label htmlFor="tab-search">Поиск</label>

                        <div className="content">
                            stuff
                        </div>
                    </div>


                </div>


            </div>
        );
    }
});

module.exports = GeoList;


@@ -122,482 +122,8 @@
 ');%0A
-var dataSource = %5B%0A    %7B%0A        type: 'Employees',%0A        collapsed: false,%0A        people: %5B%0A            %7Bname: 'Paul Gordon', age: 25, sex: 'male', role: 'coder', collapsed: false%7D,%0A            %7Bname: 'Sarah Lee', age: 23, sex: 'female', role: 'jqueryer', collapsed: false%7D%0A        %5D%0A    %7D,%0A    %7B%0A        type: 'CEO',%0A        collapsed: false,%0A        people: %5B%0A            %7Bname: 'Drew Anderson', age: 35, sex: 'male', role: 'boss', collapsed: false%7D%0A        %5D%0A    %7D%0A%5D;
 %0Areq

remove unused data