content: import PropTypes from 'prop-types';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import Gallery from '../src/Gallery';
  import CheckButton from '../src/CheckButton';
  
  class Demo0 extends React.Component {
      constructor(props){
          super(props);
  
          this.state = {
              images: this.props.images,
              selectAllChecked: false
          };
  
          this.onSelectImage = this.onSelectImage.bind(this);
          this.getSelectedImages = this.getSelectedImages.bind(this);
          this.onClickSelectAll = this.onClickSelectAll.bind(this);
      }
  
      allImagesSelected (images){
          var f = images.filter(
              function (img) {
                  return img.isSelected == true;
              }
          );
          return f.length == images.length;
      }
  
      onSelectImage (index, image) {
          var images = this.state.images.slice();
          var img = images[index];
          if(img.hasOwnProperty("isSelected"))
              img.isSelected = !img.isSelected;
          else
              img.isSelected = true;
  
          this.setState({
              images: images
          });
  
          if(this.allImagesSelected(images)){
              this.setState({
                  selectAllChecked: true
              });
          }
          else {
              this.setState({
                  selectAllChecked: false
              });
          }
      }
  
      getSelectedImages () {
          var selected = [];
          for(var i = 0; i < this.state.images.length; i++)
              if(this.state.images[i].isSelected == true)
                  selected.push(i);
          return selected;
      }
  
      onClickSelectAll () {
          var selectAllChecked = !this.state.selectAllChecked;
          this.setState({
              selectAllChecked: selectAllChecked
          });
  
          var images = this.state.images.slice();
          if(selectAllChecked){
              for(var i = 0; i < this.state.images.length; i++)
                  images[i].isSelected = true;
          }
          else {
              for(var i = 0; i < this.state.images.length; i++)
                  images[i].isSelected = false;
  
          }
          this.setState({
              images: images
          });
      }
  
      render () {
          return (
                  <div>
                  <CheckButton
              index={0}
              isSelected={this.state.selectAllChecked}
              onClick={this.onClickSelectAll}
              parentHover={true}
              color={"rgba(0,0,0,0.54)"}
              selectedColor={"#4285f4"}
              hoverColor={"rgba(0,0,0,0.54)"}/>
                  <div style={{
                      height: "36px",
                      display: "flex",
                      alignItems: "center"
                  }}>
                  select all
                  </div>
                  <div style={{
                      padding: "2px",
                      color: "#666"
                  }}>Selected images: {this.getSelectedImages().toString()}</div>
                  <div style={{
                      display: "block",
                      minHeight: "1px",
                      width: "100%",
                      border: "1px solid #ddd",
                      overflow: "auto"}}>
                  <Gallery
              images={this.state.images}
              onSelectImage={this.onSelectImage}
              showLightboxThumbnails={true}/>
                  </div>
                  </div>
          );
      }
  }
  
  Demo0.propTypes = {
      images: PropTypes.arrayOf(
          PropTypes.shape({
              src: PropTypes.string.isRequired,
              thumbnail: PropTypes.string.isRequired,
              srcset: PropTypes.array,
              caption: PropTypes.oneOfType([
                  PropTypes.string,
                  PropTypes.element
              ]),
              thumbnailWidth: PropTypes.number.isRequired,
              thumbnailHeight: PropTypes.number.isRequired,
              isSelected: PropTypes.bool
          })
      ).isRequired
  };
  
  Demo0.defaultProps = {
      images: shuffleArray([
          {
              src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
              thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 174,
              tags: [{value: "Nature", title: "Nature"}, {value: "Flora", title: "Flora"}],
              caption: "After Rain (Jeshu John - designerspics.com)"
          },
          {
              src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
              thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 212,
              caption: "Boats (Jeshu John - designerspics.com)"
          },
          {
              src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
              thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 212,
              caption: "Color Pencils (Jeshu John - designerspics.com)"
          },
          {
              src: "https://c7.staticflickr.com/9/8546/28354329294_bb45ba31fa_b.jpg",
              thumbnail: "https://c7.staticflickr.com/9/8546/28354329294_bb45ba31fa_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 213,
              caption: "Red Apples with other Red Fruit (foodiesfeed.com)"
          },
          {
              src: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_b.jpg",
              thumbnail: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 183,
              caption: "37H (gratispgraphy.com)"
          },
          {
              src: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_b.jpg",
              thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg",
              thumbnailWidth: 240,
              thumbnailHeight: 320,
              tags: [{value: "Nature", title: "Nature"}],
              caption: "8H (gratisography.com)"
          },
          {
              src: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_b.jpg",
              thumbnail: "https://c3.staticflickr.com/9/8583/28354353794_9f2d08d8c0_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 190,
              caption: "286H (gratisography.com)"
          },
          {
              src: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_b.jpg",
              thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 148,
              tags: [{value: "People", title: "People"}],
              caption: "315H (gratisography.com)"
          },
          {
              src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg",
              thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 213,
              caption: "201H (gratisography.com)"
          },
          {
              src: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_b.jpg",
              alt: "Big Ben - London",
              thumbnail: "https://c2.staticflickr.com/9/8239/28897202241_1497bec71a_n.jpg",
              thumbnailWidth: 248,
              thumbnailHeight: 320,
              caption: "Big Ben (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_b.jpg",
              alt: "Red Zone - Paris",
              thumbnail: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 113,
              tags: [{value: "People", title: "People"}],
              caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_b.jpg",
              alt: "Wood Glass",
              thumbnail: "https://c6.staticflickr.com/9/8520/28357073053_cafcb3da6f_n.jpg",
              thumbnailWidth: 313,
              thumbnailHeight: 320,
              caption: "Wood Glass (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg",
              thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 213,
              caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c4.staticflickr.com/9/8562/28897228731_ff4447ef5f_b.jpg",
              thumbnail: "https://c4.staticflickr.com/9/8562/28897228731_ff4447ef5f_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 194,
              caption: "Old Barn (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c2.staticflickr.com/8/7577/28973580825_d8f541ba3f_b.jpg",
              alt: "Cosmos Flower",
              thumbnail: "https://c2.staticflickr.com/8/7577/28973580825_d8f541ba3f_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 213,
              caption: "Cosmos Flower Macro (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_b.jpg",
              thumbnail: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_n.jpg",
              thumbnailWidth: 271,
              thumbnailHeight: 320,
              caption: "Orange Macro (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c1.staticflickr.com/9/8330/28941240416_71d2a7af8e_b.jpg",
              thumbnail: "https://c1.staticflickr.com/9/8330/28941240416_71d2a7af8e_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 213,
              tags: [{value: "Nature", title: "Nature"}, {value: "People", title: "People"}],
              caption: "Surfer Sunset (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg",
              thumbnail: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 213,
              tags: [{value: "People", title: "People"}, {value: "Sport", title: "Sport"}],
              caption: "Man on BMX (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_b.jpg",
              thumbnail: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 213,
              caption: "Ropeman - Thailand (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c4.staticflickr.com/8/7476/28973628875_069e938525_b.jpg",
              thumbnail: "https://c4.staticflickr.com/8/7476/28973628875_069e938525_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 213,
              caption: "Time to Think (Tom Eversley - isorepublic.com)"
          },
          {
              src: "https://c6.staticflickr.com/9/8593/28357129133_f04c73bf1e_b.jpg",
              thumbnail: "https://c6.staticflickr.com/9/8593/28357129133_f04c73bf1e_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 179,
              tags: [{value: "Nature", title: "Nature"}, {value: "Fauna", title: "Fauna"}],
              caption: "Untitled (Jan Vasek - jeshoots.com)"
          },
          {
              src: "https://c6.staticflickr.com/9/8893/28897116141_641b88e342_b.jpg",
              thumbnail: "https://c6.staticflickr.com/9/8893/28897116141_641b88e342_n.jpg",
              thumbnailWidth: 320,
              thumbnailHeight: 215,
              tags: [{value: "People", title: "People"}],
              caption: "Untitled (moveast.me)"
          },
          {
              src: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_b.jpg",
              thumbnail: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_n.jpg",
              thumbnailWidth: 257,
              thumbnailHeight: 320,
              caption: "A photo by 贝莉儿 NG. (unsplash.com)"
          },
          {
              src: "https://c7.staticflickr.com/9/8824/28868764222_19f3b30773_b.jpg",
              thumbnail: "https://c7.staticflickr.com/9/8824/28868764222_19f3b30773_n.jpg",
              thumbnailWidth: 226,
              thumbnailHeight: 320,
              caption: "A photo by Matthew Wiebe. (unsplash.com)"
          }
      ]).splice(0,16)
  };
  
  
  ReactDOM.render(<Demo0 />, document.getElementById('demo0'));
  