var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');
var {State, Link} = require('react-router');

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

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

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

var Endpoint = React.createClass({
    displayName: 'Endpoint',
    mixins: [
        Reflux.listenTo(EndpointsStore, 'onStoreUpdate'),
        State
    ],
    getInitialState() {
        var state = this.getStoreState();
        return state;
    },
    getStoreState() {
        return {
            definitions: EndpointsStore.getDefinitions()
        };
    },
    onStoreUpdate() {
        this.setState(this.getStoreState());
    },
    render: function () {
        var {definitions} = this.state;
        var name = this.props.params.id;
        if(!definitions) {
            return null;
        }
        
        return (
            <div>
                <Link to="/endpoints" className="cta-back">Endpoints</Link>
                <div className="alpha">{name}</div>
                {this.renderParameters(definitions[name])}
            </div>
        );
    },
    renderParameters(parameters) {
        if(parameters) {
            var rows = _.map(parameters.properties, (pp, key)=>{
                var name = _.includes(parameters.required, key) ? <strong>{key}</strong> : key;
                var row = {
                    _id: key,
                    Name: name,
                    Type: <DefinitionType data={pp}/>,
                    Description: pp.description || ''
                };

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

module.exports = Endpoint;