import React, { PropTypes, Component } from 'react';
import TopNavBar from '../components/ui/TopNavBar';
import EmptyMessage from '../components/ui/EmptyMessage';
import Image from '../components/ui/Image';
import FullWidthButton from '../components/ui/FullWidthButton';
import AuthenticatedComponent from '../components/AuthenticatedComponent';
import translate from '../i18n/Translate';
import connectToStores from '../utils/connectToStores';
import GalleryAlbumStore from '../stores/GalleryAlbumStore';
import GalleryPhotoActionCreators from '../actions/GalleryPhotoActionCreators';

function parseId(user) {
    return user.id;
}

function getState() {
    const name = GalleryAlbumStore.getAlbumName();
    const photos = GalleryAlbumStore.getAlbumPhotos();
    const noPhotos = GalleryAlbumStore.noPhotos();
    return {
        name,
        photos,
        noPhotos
    };
}

@AuthenticatedComponent
@translate('GalleryAlbumPhotosPage')
@connectToStores([GalleryAlbumStore], getState)
export default class GalleryAlbumPhotosPage extends Component {

    static propTypes = {
        // Injected by @AuthenticatedComponent
        user: PropTypes.object.isRequired,
        // Injected by @translate:
        strings: PropTypes.object,
        // Injected by @connectToStores:
        name: PropTypes.string.isRequired,
        photos: PropTypes.array.isRequired,
        noPhotos: PropTypes.bool
    };

    static contextTypes = {
        history: PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);

        this.handleScroll = this.handleScroll.bind(this);
        this.importPhotos = this.importPhotos.bind(this);
        this.isSelected = this.isSelected.bind(this);

        this.state = {
            selectedPhotos: []
        };
    }

    componentWillMount() {
        if ((!this.props.photos || this.props.photos.length === 0) && !this.props.noPhotos) {
            this.context.history.pushState(null, 'gallery');
        }
    }

    handleScroll() {
        
    }
    
    selectPhoto(photo) {
        let selectedPhotos = this.state.selectedPhotos;
        if (this.isSelected(photo)) {
            const index = selectedPhotos.indexOf(photo);
            selectedPhotos.splice(index, 1);
        } else {
            selectedPhotos.push(photo);
        }
        this.setState({selectedPhotos: selectedPhotos});
    }
    
    isSelected(photo) {
        return this.state.selectedPhotos.some(selectedPhoto => selectedPhoto.id === photo.id);
    }

    importPhotos() {
        const userId = parseId(this.props.user);
        this.state.selectedPhotos.forEach(selectedPhoto => GalleryPhotoActionCreators.postPhoto(userId, {
            url: selectedPhoto.picture
        }));
        this.context.history.pushState(null, 'gallery');
    }

    render() {
        const {name, photos, noPhotos, strings} = this.props;
        return (
            <div className="view view-main" onScroll={this.handleScroll}>
                <TopNavBar leftIcon={'left-arrow'} centerText={name}/>
                <div className="page gallery-page">
                    <div id="page-content" className="gallery-content">
                        {noPhotos ? <EmptyMessage text={strings.empty}/> : photos.map(photo =>
                            <div key={photo.id} className={this.isSelected(photo) ? 'photo-wrapper selected-photo' : 'photo-wrapper'} onClick={this.selectPhoto.bind(this, photo)}>
                                {this.isSelected(photo) ? <span className="icon icon-form-checkbox"></span> : ''}
                                <div className="photo-absolute-wrapper">
                                    <Image src={photo.picture}/>
                                </div>
                            </div>
                        )}
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </div>
                </div>
                {noPhotos ? '' :
                    <div className="fixed-button">
                        <FullWidthButton onClick={this.importPhotos}>{strings.importPhotos}</FullWidthButton>
                    </div>
                }
            </div>
        );
    }
};

GalleryAlbumPhotosPage.defaultProps = {
    strings: {
        empty       : 'There are no photos in this album',
        importPhotos: 'Import photos'
    }
};
@@ -580,16 +580,42 @@
 tors';%0A%0A
+const photosPerPage = 8;%0A%0A
 function
@@ -1750,24 +1750,147 @@
 s.state = %7B%0A
+            displayedPhotos: props.photos.filter((photo, index) =%3E index %3C photosPerPage),%0A            paginationIndex: 0,%0A
             
@@ -2128,38 +2128,1356 @@
   %7D%0A
-%0A    handleScroll() %7B%0A        
+    %0A    componentDidMount() %7B%0A        const %7Bphotos%7D = this.props;%0A        const %7BpaginationIndex%7D = this.state;%0A        if (!this.canScroll()) %7B%0A            this.setState(%7B%0A                paginationIndex: paginationIndex + 1,%0A                displayedPhotos: photos.filter((photo, index) =%3E index %3C photosPerPage * (paginationIndex + 2))%0A%0A            %7D);%0A        %7D%0A    %7D%0A%0A    handleScroll() %7B%0A        const %7Bphotos%7D = this.props;%0A        const %7BpaginationIndex%7D = this.state;%0A        let offsetTop = parseInt(document.getElementsByClassName('view')%5B0%5D.scrollTop + document.getElementsByClassName('view')%5B0%5D.offsetHeight - 50);%0A        let offsetTopMax = parseInt(document.getElementById('page-content').offsetHeight);%0A%0A        if (offsetTop %3E= offsetTopMax) %7B%0A            document.getElementsByClassName('view')%5B0%5D.removeEventListener('scroll', this.handleScroll);%0A            this.setState(%7B%0A                paginationIndex: paginationIndex + 1,%0A                displayedPhotos: photos.filter((photo, index) =%3E index %3C photosPerPage * (paginationIndex + 2))%0A            %7D);%0A        %7D%0A    %7D%0A%0A    canScroll() %7B%0A        const totalHeight = parseInt(document.getElementsByClassName('view')%5B0%5D.offsetHeight);%0A        const scrollHeight = parseInt(document.getElementsByClassName('view')%5B0%5D.scrollHeight);%0A        return totalHeight !== scrollHeight;
 %0A   
@@ -4293,24 +4293,16 @@
 t %7Bname,
- photos,
  noPhoto
@@ -4688,17 +4688,37 @@
 ty%7D/%3E : 
-p
+this.state.displayedP
 hotos.ma

Add pagination to gallery photos