'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import LinkedStateMixin from 'react-addons-linked-state-mixin';

import ImageGallery from '../src/ImageGallery.react';

const App = React.createClass({

  mixins: [LinkedStateMixin],

  getInitialState() {
    return {
      isPlaying: false,
      slideInterval: 4000,
      showThumbnails: true,
      showBullets: true,
      currentIndex: null
    };
  },

  componentDidUpdate(prevProps, prevState) {
    if (this.state.slideInterval !== prevState.slideInterval) {
      // refresh setInterval
      this._pauseSlider();
      this._playSlider();
    }
  },

  _pauseSlider() {
    if (this.refs.imageGallery) {
      this.refs.imageGallery.pause();
      this.setState({isPlaying: false});
    }
  },

  _playSlider() {
    if (this.refs.imageGallery) {
      this.refs.imageGallery.play();
      this.setState({isPlaying: true});
    }
  },

  _handleSlide(index) {
    this.setState({currentIndex: index});
  },

  render() {
    const images = [
      {
        original: 'http://lorempixel.com/1000/600/nature/1/',
        thumbnail: 'http://lorempixel.com/250/150/nature/1/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/2/',
        thumbnail: 'http://lorempixel.com/250/150/nature/2/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/3/',
        thumbnail: 'http://lorempixel.com/250/150/nature/3/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/4/',
        thumbnail: 'http://lorempixel.com/250/150/nature/4/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/5/',
        thumbnail: 'http://lorempixel.com/250/150/nature/5/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/6/',
        thumbnail: 'http://lorempixel.com/250/150/nature/6/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/7/',
        thumbnail: 'http://lorempixel.com/250/150/nature/7/'
      }
    ];

    return (

      <section className='app'>
        <ImageGallery
          ref='imageGallery'
          items={images}
          lazyLoad={false}
          showBullets={this.state.showBullets}
          showThumbnails={this.state.showThumbnails}
          slideInterval={parseInt(this.state.slideInterval)}
          autoPlay={this.state.isPlaying}
          onSlide={this._handleSlide}
        />

        <div className='app-sandbox'>

          <h2> Playground </h2>

          <ul>
            <li>
              <a
                className={'app-button ' + (this.state.isPlaying ? 'active' : '')}
                onClick={this._playSlider}>
                Play
              </a>
            </li>
            <li>
            <a
              className={'app-button ' + (!this.state.isPlaying ? 'active' : '')}
              onClick={this._pauseSlider}>
              Pause
            </a>
            </li>
            <li>
              <div>Slide interval</div>
              <input
                type='text'
                placeholder='SlideInterval'
                valueLink={this.linkState('slideInterval')}/>
            </li>
            <li>
              <input
                type='checkbox'
                checkedLink={this.linkState('showBullets')}/>
                show bullets?
            </li>
            <li>
              <input
                type='checkbox'
                checkedLink={this.linkState('showThumbnails')}/>
                show Thumbnails?
            </li>
            {
              this.state.currentIndex !== null &&
                <li>
                  Event: slid to index {this.state.currentIndex}
                </li>
            }
          </ul>

        </div>
      </section>
    );
  }

});


(function() {
  ReactDOM.render(<App/>, document.getElementById('container'));
})();

@@ -363,24 +363,45 @@
 ails: true,%0A
+      showNav: true,%0A
       showBu
@@ -2281,16 +2281,55 @@
 bnails%7D%0A
+          showNav=%7Bthis.state.showNav%7D%0A
         
@@ -3579,32 +3579,211 @@
           %3C/li%3E%0A
+            %3Cli%3E%0A              %3Cinput%0A                type='checkbox'%0A                checkedLink=%7Bthis.linkState('showNav')%7D/%3E%0A                show Navigation?%0A            %3C/li%3E%0A
             %7B%0A  

add showNav to example