import React from 'react';
import find from 'lodash/collection/find';
import Sidebar from './sidebar/Sidebar';
import Content from './content/Content';
import Component from './content/Component';

export default class KitchenSink extends React.Component {

  static propTypes = {
    componentId: React.PropTypes.string,
    contentId: React.PropTypes.string,
    sectionId: React.PropTypes.string,
    sections: React.PropTypes.array.isRequired,
    openSections: React.PropTypes.array,
    components: React.PropTypes.array,
    onSelectItem: React.PropTypes.func.isRequired,
    onToggleSection: React.PropTypes.func.isRequired,
    scope: React.PropTypes.object,
    iso: React.PropTypes.bool,
    header: React.PropTypes.node,
    footer: React.PropTypes.node,
    loading: React.PropTypes.bool
  };

  static defaultProps = {
    openSections: []
  };

  findSection = () => find(this.props.sections, { id: this.props.sectionId }) || {};

  findComponent = () => find(this.findSection().components, { id: this.props.componentId });

  findContent = () => find(this.findSection().contents, { id: this.props.contentId });

  render() {
    const {
      props: {
        componentId,
        contentId,
        sections,
        openSections,
        onSelectItem,
        onToggleSection,
        scope,
        iso,
        header,
        footer,
        loading
      }
    } = this;

    const children = componentId ?
      <Component {...{ component: this.findComponent(), scope, iso, header, footer }} />
      :
      <Content content={this.findContent()} />;

    return (
      <div className='kitchen-sink'>
        <Sidebar {...{ sections, openSections, onToggleSection, componentId, contentId, onSelectItem, loading }} >
          {!loading && children}
        </Sidebar>
      </div>
    );
  }

}

@@ -1127,16 +1127,27 @@
 %0A%0A  
-render()
+getChildren = () =%3E
  %7B%0A 
@@ -1161,25 +1161,8 @@
 t %7B%0A
-      props: %7B%0A  
     
@@ -1182,18 +1182,16 @@
 ,%0A      
-  
 contentI
@@ -1203,119 +1203,26 @@
     
- 
- sections,%0A        openSections,%0A        onSelectItem,%0A        onToggleSection,%0A        scope,%0A        iso,%0A  
+scope,%0A      iso,%0A
     
@@ -1241,78 +1241,43 @@
     
- 
- 
 footer
-,%0A        loading%0A      %7D%0A    %7D = this;%0A%0A    const children = 
+%0A    %7D = this.props;%0A    if (
 comp
@@ -1287,17 +1287,25 @@
 ntId
- ?
+) %7B
 %0A      
+return 
 %3CCom
@@ -1386,22 +1386,50 @@
 %7D /%3E
+;
 %0A    
-  :%0A     
+%7D else if (contentId) %7B%0A      return
  %3CCo
@@ -1466,16 +1466,253 @@
 t()%7D /%3E;
+%0A    %7D%0A    return %3Cdiv /%3E;%0A  %7D;%0A%0A  render() %7B%0A    const %7B%0A      props: %7B%0A        componentId,%0A        contentId,%0A        sections,%0A        openSections,%0A        onSelectItem,%0A        onToggleSection,%0A        loading%0A      %7D%0A    %7D = this;
 %0A%0A    re
@@ -1897,16 +1897,26 @@
  && 
-c
+this.getC
 hildren
+()
 %7D%0A  

improve examples landing page