text: /**
   * The examples provided by Facebook are for non-commercial testing and
   * evaluation purposes only.
   *
   * Facebook reserves all rights not expressly granted.
   *
   * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
   * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
   * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
   * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
   * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
   * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   *
   * @flow
   */
  'use strict';
  
  var React = require('react-native');
  var {
    Image,
    // LayoutAnimation,
    ListView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
  } = React;
  
  // var NativeModules = require('NativeModules');
  // var {
  //   UIManager,
  // } = NativeModules;
  
  var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
  var NUM_SECTIONS = 100;
  var NUM_ROWS_PER_SECTION = 10;
  
  var Thumb = React.createClass({
    getInitialState: function() {
      return {thumbIndex: this._getThumbIdx(), dir: 'row'};
    },
    componentWillMount: function() {
      // UIManager.setLayoutAnimationEnabledExperimental &&
      //   UIManager.setLayoutAnimationEnabledExperimental(true);
    },
    _getThumbIdx: function() {
      return Math.floor(Math.random() * THUMB_URLS.length);
    },
    _onPressThumb: function() {
      // var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length];
      // LayoutAnimation.configureNext(config);
      this.setState({
        thumbIndex: this._getThumbIdx(),
        dir: this.state.dir === 'row' ? 'column' : 'row',
      });
    },
    render: function() {
      return (
        <TouchableOpacity
          onPress={this._onPressThumb}
          style={[styles.buttonContents, {flexDirection: this.state.dir}]}>
          <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
          <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
          <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
          {this.state.dir === 'column' ?
            <Text>
              Oooo, look at this new text!  So awesome it may just be crazy.
              Let me keep typing here so it wraps at least one line.
            </Text> :
            <Text />
          }
        </TouchableOpacity>
      );
    }
  });
  
  var ListViewPagingExample = React.createClass({
    statics: {
      title: '<ListView> - Paging',
      description: 'Floating headers & layout animations.'
    },
  
    getInitialState: function() {
      var getSectionData = (dataBlob, sectionID) => {
        return dataBlob[sectionID];
      };
      var getRowData = (dataBlob, sectionID, rowID) => {
        return dataBlob[rowID];
      };
  
      var dataSource = new ListView.DataSource({
        getRowData: getRowData,
        getSectionHeaderData: getSectionData,
        rowHasChanged: (row1, row2) => row1 !== row2,
        sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
      });
  
      var dataBlob = {};
      var sectionIDs = [];
      var rowIDs = [];
      for (var ii = 0; ii < NUM_SECTIONS; ii++) {
        var sectionName = 'Section ' + ii;
        sectionIDs.push(sectionName);
        dataBlob[sectionName] = sectionName;
        rowIDs[ii] = [];
  
        for (var jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
          var rowName = 'S' + ii + ', R' + jj;
          rowIDs[ii].push(rowName);
          dataBlob[rowName] = rowName;
        }
      }
      return {
        dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
        headerPressCount: 0,
      };
    },
  
    renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement {
      return (<Thumb text={rowData}/>);
    },
  
    renderSectionHeader: function(sectionData: string, sectionID: string) {
      return (
        <View style={styles.section}>
          <Text style={styles.text}>
            {sectionData}
          </Text>
        </View>
      );
    },
  
    renderHeader: function() {
      var headerLikeText = this.state.headerPressCount % 2 ?
        <View><Text style={styles.text}>1 Like</Text></View> :
        null;
      return (
        <TouchableOpacity onPress={this._onPressHeader} style={styles.header}>
          {headerLikeText}
          <View>
            <Text style={styles.text}>
              Table Header (click me)
            </Text>
          </View>
        </TouchableOpacity>
      );
    },
  
    renderFooter: function() {
      return (
        <View style={styles.header}>
          <Text onPress={() => console.log('Footer!')} style={styles.text}>
            Table Footer
          </Text>
        </View>
      );
    },
  
    render: function() {
      return (
        <ListView
          style={styles.listview}
          dataSource={this.state.dataSource}
          onChangeVisibleRows={(visibleRows, changedRows) => console.log({visibleRows, changedRows})}
          renderHeader={this.renderHeader}
          renderFooter={this.renderFooter}
          renderSectionHeader={this.renderSectionHeader}
          renderRow={this.renderRow}
          initialListSize={10}
          pageSize={4}
          scrollRenderAheadDistance={500}
        />
      );
    },
  
    _onPressHeader: function() {
      var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length];
      LayoutAnimation.configureNext(config);
      this.setState({headerPressCount: this.state.headerPressCount + 1});
    },
  
  });
  
  var styles = StyleSheet.create({
    listview: {
      backgroundColor: '#B0C4DE',
    },
    header: {
      height: 40,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#3B5998',
      flexDirection: 'row',
    },
    text: {
      color: 'white',
      paddingHorizontal: 8,
    },
    rowText: {
      color: '#888888',
    },
    thumbText: {
      fontSize: 20,
      color: '#888888',
    },
    buttonContents: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginHorizontal: 5,
      marginVertical: 3,
      padding: 5,
      backgroundColor: '#EAEAEA',
      borderRadius: 3,
      paddingVertical: 10,
    },
    img: {
      width: 64,
      height: 64,
      marginHorizontal: 10,
      backgroundColor: 'transparent',
    },
    section: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'flex-start',
      padding: 6,
      backgroundColor: '#5890ff',
    },
  });
  
  // var animations = {
  //   layout: {
  //     spring: {
  //       duration: 750,
  //       create: {
  //         duration: 300,
  //         type: LayoutAnimation.Types.easeInEaseOut,
  //         property: LayoutAnimation.Properties.opacity,
  //       },
  //       update: {
  //         type: LayoutAnimation.Types.spring,
  //         springDamping: 0.4,
  //       },
  //     },
  //     easeInEaseOut: {
  //       duration: 300,
  //       create: {
  //         type: LayoutAnimation.Types.easeInEaseOut,
  //         property: LayoutAnimation.Properties.scaleXY,
  //       },
  //       update: {
  //         delay: 100,
  //         type: LayoutAnimation.Types.easeInEaseOut,
  //       },
  //     },
  //   },
  // };
  //
  // var layoutAnimationConfigs = [
  //   animations.layout.spring,
  //   animations.layout.easeInEaseOut,
  // ];
  
  module.exports = ListViewPagingExample;
  