var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');

var {Link} = require('react-router');

var EndpointsActions = require('trc-client-core/src/development/EndpointsActions');
var EndpointsStore = require('trc-client-core/src/development/EndpointsStore');

var Table = require('bd-stampy/components/Table');

var Endpoints = React.createClass({
    displayName: 'Endpoints',
    mixins: [
        Reflux.listenTo(EndpointsStore, 'onStoreUpdate')
    ],
    getInitialState() {
        return this.getStoreState();
    },
    getStoreState() {
        return {
            paths: EndpointsStore.getAllPaths(),
            information: EndpointsStore.getInformation()
        };
    },
    onStoreUpdate() {
        this.setState(this.getStoreState());
    },
    componentDidMount: function () {
        EndpointsActions.fetchAllEndpoints();
    },
    render: function () {
        if(!this.state.information) {
            return null;
        }

        var {information} = this.state;

        return (
            <div>
                <h1>{information.title}</h1>
                <p>{information.description}</p>
                <Table modifier="data">
                    <tr><td className="w10">Version</td><td>{information.version}</td></tr>
                    <tr><td>Endpoints</td><td>{_.keys(this.state.paths).length}</td></tr>
                </Table>
                {this.renderPaths()}
            </div>
        );
    },
    renderPaths() {
        if(!this.state.paths) {
            return null;
        }

        var rows =  _(this.state.paths).map((path, key) => {
            return {
                _id: key,
                Path: <Link to={`/endpoints/${encodeURIComponent(key)}`} className="link">{key}</Link>,
                Type: _(path).keys().join(', ')
            };
        }).value();

        return <Table type="data" modifier="data" className="">
            {rows}
        </Table>;
    }
});

module.exports = Endpoints;