// Here is a little example for everyone
// Let's build an accordion that is a11y compliant!
// If there are any React purist out there, go easy on me, I am learning too :)
// I have to say, every change I have had to make so far has been SIGNIFICANTLY less painful than maintaining this through the jQuery spaghetti version

// Select the node to render the React component into
// The "Parent Element" or "Container"
// This is just an HTML element that React will render the state of our accordion into
var renderNode = document.getElementById("accordions");

// This enables react components to work well on touch devices
React.initializeTouchEvents(true);

// In react everything is organized as a self contained object.

/////////////////////////////////////
// Accordion Component
/////////////////////////////////////
var Accordion = React.createClass({
    render: function() {
        // Look into this vvvv. I believe there is a better way than concatenating a string to dynamic properties. Probably some sort of binding?
        var classes = "accordion " + this.props.theme;
        return(
            <div className={classes}>
                {this.props.children}
            </div>
        );
    }
});

/////////////////////////////////////
// Accordion Item Component
////////////////////////////////////
var AccordionItem = React.createClass({
    
    // Initial setup
    getInitialState: function() {
        return {
          expanded: this.props.expanded
        };
    },
    
    // Actions   
    expand: function() {
        this.setState({expanded: true});
    },
    collapse: function() {
        this.setState({expanded: false});
    },
    toggleExpansion: function() {
        this.setState({expanded: !this.state.expanded});
    },
    
    // Events
    handleClick: function() {
        this.toggleExpansion();
    },
    
    handleKeyPress: function(ev) {
       var key = ev.keyCode;
       console.log(ev);
        
       // Enter
       if (key === 13) {
          this.toggleExpansion(); 
       }
        
       // Esc
       if (key === 27) {
          this.collapse();
       }
    },
    
    // Render 
    render: function() {
        // You can think of the render function as the "Template"
        // Here is where we set our state on the actual DOM element
        // We detect via the expanded state of the component what state
        // things like aria-hidden and tab-indexs should be in as well as
        // adjusting class names to change appearance.
        // A REAL nice way to build UI, give it a try.
        // DO NOTE: This is not the render function that is responsible for actually placing the element on the screen. That comes later :)
        
        var expandState = this.state.expanded ? 'is-expanded' : 'is-collapsed',
            hiddenState = this.state.expanded ? '' : 'hidden',
            ariaHiddenState = this.state.expanded ? 'false' : 'true',
            tabState = this.state.expanded ? '0' : '-1',
            classes = "accordion-item " + expandState;
        
        // OK, now take all that state and tell React how to render it into a template
        return (
            <div className={classes}>
                <header onClick={this.handleClick} onKeyDown={this.handleKeyPress} tabIndex="0">
                  <span>Tab-Index = {tabState}</span><span>Aria-Hidden = {ariaHiddenState}</span><span>Hidden = {hiddenState} </span>
                </header>
                <section aria-hidden={ariaHiddenState} hidden={hiddenState} tabIndex={tabState} onKeyDown={this.handleKeyPress}>
                    <h2>Content</h2> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim inventore velit sint quod blanditiis, sapiente voluptatibus, molestiae, dolore ipsam labore quaerat veritatis fuga libero! Explicabo aperiam sapiente optio consectetur placeat.
                </section>
            </div>
        );
    }
});

// Where the "Magic" happens. 
React.render(
    <div>
        <Accordion theme="red" toggleType="all">
            <AccordionItem />
            <AccordionItem expanded="true" />
            <AccordionItem />
            <AccordionItem />
        </Accordion>
    
          <Accordion theme="light-blue" toggleType="single">
            <AccordionItem />
            <AccordionItem />
            <AccordionItem />
            <AccordionItem />
         </Accordion>
    </div>    
   , renderNode);