/*
 *
 *  ReactShades
 *
 */

var Shade = (function(React){
  const {PureRenderMixin} = React.addons;

  function Slot(props, context) {
    const contents = context.lightTree[props.name];
    if (!contents) return <span></span>;

    const root = React.Children.only(props.children || <span></span>);
    const inner = root && root.props.children;

    var children = [];
    var rootProps = {};

    contents.forEach(content => {
      const { children: lightTree, slot, ...props } = content.props;
      var child = lightTree || <span></span>;

      if (inner) {
        child = React.cloneElement(inner, props, lightTree);
      } else {
        rootProps = props;
      }
      
      children.push(child);
    });

    return React.cloneElement(root, rootProps, children);
  }

  Slot.contextTypes = {
    lightTree: React.PropTypes.object
  };

  function Content(props) {
    return <div>{props.children}</div>;
  }
  
  const Shade = React.createClass({
    mixins: [ PureRenderMixin ],
    
    statics: {
      Content,
      Slot,
      visit(nodes, visitor) {
        React.Children.forEach(nodes, function(node, idx) {
          if(visitor(node) !== false) {
            Shade.visit(node.props.children, visitor);
          }
        });
      }
    },
    
    childContextTypes: {
      lightTree: React.PropTypes.object
    },
    
    getChildContext() {
      var slots = {};
      
      Shade.visit(this.props.lightTree, (child)=> {
        if (child.type === Shade || child.type === Slot) {
          return false;
        } else if (!child.props.slot) {
          return;
        }

        (slots[child.props.slot] || (slots[child.props.slot] = [])).push(child);
        
        return false;
      });
      
      return {
        lightTree: slots
      };
    },
    
    render() {
      return React.Children.only(this.props.children);
    }
  });

  return Shade;

})(React);