/** @jsx React.DOM */
/* global conjur, React, d3, _ */

(function(conjur, React, d3, _) {
    // TODO move these somewhere common
    function _translate(x,y){
        return 'transate(' + x + ',' + y + ')';
    }

    this.RoleGraph = React.createClass({
        /*
         * React Lifecycle methods
         */

        getInitialState: function(){
            return { ready: false };
        },

        componentDidMount: function(){
            this.ctx = {};
            this.el = this.getDOMNode();
            this._computeState(this.props);
        },

        componentWillReceiveProps: function(nextProps){
            this._computeState(nextProps);
        },


        componentDidUpdate: function(){
            if(this.state.ready === false){
                return;
            }

            if(this.sgv === undefined){
                this._create();
            }

            this._update();
        },

        /*
         * Internal Methods
         */

        /**
         * Create the non-data bound graph components.
         * @private
         */
        _create: function(){
            var svg = this.ctx.svg = d3.select(this.el)
                .append('svg')
                .attr('class', 'd3-digraph') // XXX is this
                .attr('width', this.state.fullWidth)
                .attr('height', this.state.fullHeight)
                .append('g')
                .attr('class', 'd3-digraph__inner')
                .attr('transform', _translate(this.state.margin.left, this.state.margin.top));
        },

        /**
         * Bind graph components to this.state.data, which should be an object as returned by
         * this.conjur.role.graph(...).
         *
         * @private
         */
        _update: function(){

        },

        /**
         * Given props, we try to decide how to do our geometric shit.
         * @param props
         * @private
         */
        _computeState: function(props){

        }



    });

}).bind(conjur.views)
(
    conjur,
    React,
    d3,
    _
);