import React, {PropTypes, Component} from 'react';
import {
  StyleSheet,
  ScrollView, ListView
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {List, ListItem} from 'react-native-elements';

const baseUrl = 'bundle-assets://cheatsheets/';

const ARDUINO_PINOUT = [{
  name: 'Arduino Uno',
  file: 'arduino-uno.pdf'
}, {
  name: 'Arduino Due',
  file: 'arduino-due.pdf'
}, {
  name: 'Arduino Esplora',
  file: 'arduino-esplora.pdf'
}, {
  name: 'Arduino Leonardo',
  file: 'arduino-leonardo.pdf'
}, {
  name: 'Arduino Mega',
  file: 'arduino-mega.pdf'
}, {
  name: 'Arduino Micro',
  file: 'arduino-micro.pdf'
}, {
  name: 'Arduino Mini',
  file: 'arduino-mini.pdf'
}, {
  name: 'Arduino Uno',
  file: 'arduino-pro-mini.pdf'
}];

class ToolsView extends Component {
  static displayName = 'ToolsView';

  static propTypes = {
    navigation: React.PropTypes.object.isRequired,
    navigate: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.state = {
      dataSource: ds.cloneWithRows(ARDUINO_PINOUT)
    };

    this.renderRow = this.renderRow.bind(this);
  }

  static navigationOptions = ({navigation}) => {
    const {navigate} = navigation;
    return {
      title: '工具',
      tabBarIcon: (props) => (
        <Icon name='build' size={24} color={props.tintColor} />
      ),
      headerRight: (
        <Icon name='bluetooth'
              size={24}
              color={'#fff'}
              onPress={() => {
                navigate('BleView');
              }}
        />
      )
    };
  };

  renderRow(rowData, sectionID) {
    const {navigate} = this.props.navigation;
    return (
      <ListItem
        leftIcon={{name: 'developer-board'}}
        key={sectionID}
        title={rowData.name}
        onPress={() => {
          navigate('PDFView', {
            title: rowData.name,
            uri: baseUrl + 'pinout/' + rowData.file
          });
        }}
      />
    );
  }

  render() {
    const {navigate} = this.props.navigation;

    return (
      <ScrollView style={styles.container} >
        <List>
          <ListItem
            title={'Arduino 编程速查表'}
            leftIcon={{name: 'developer-board'}}
            onPress={() => {
              navigate('PDFView', {
                title: 'Arduino 编程速查表',
                uri: baseUrl + 'programming/arduino-cheat-sheet.pdf'
              });
            }}
          />
        </List>
        <List>
          <ListView
            renderRow={this.renderRow}
            dataSource={this.state.dataSource}
          />
        </List>
        <List>
          <ListItem
            title={'ESP8266'}
            leftIcon={{name: 'developer-board'}}
            onPress={() => {
              navigate('PDFView', {
                title: 'ESP8266',
                uri: baseUrl + 'pinout/esp8266_devkit.pdf'
              });
            }}
          />
        </List>
        <List>
          <ListItem
            title={'Raspberry Pi 2 Model B'}
            leftIcon={{name: 'developer-board'}}
            onPress={() => {
              navigate('PDFView', {
                title: 'Raspberry Pi',
                uri: baseUrl + 'pinout/raspberry-rpi2-model-b.pdf'
              });
            }}
          />
        </List>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 20
  }
});

export default ToolsView;

@@ -80,16 +80,18 @@
 ollView,
+%0A 
  ListVie
@@ -91,16 +91,28 @@
 ListView
+,%0A  FlatList
 %0A%7D from 
@@ -1018,227 +1018,8 @@
 s);%0A
-    const ds = new ListView.DataSource(%7B%0A      rowHasChanged: (r1, r2) =%3E r1 !== r2%0A    %7D);%0A%0A    this.state = %7B%0A      dataSource: ds.cloneWithRows(ARDUINO_PINOUT)%0A    %7D;%0A%0A    this.renderRow = this.renderRow.bind(this);%0A
   %7D%0A
@@ -1467,37 +1467,89 @@
 %0A%0A  
-renderRow(rowData, sectionID)
+keyExtractor = (item, index) =%3E %60key$%7Bindex%7D%60;%0A%0A  renderList = (%7Bitem, index%7D) =%3E
  %7B%0A 
@@ -1684,17 +1684,13 @@
 ey=%7B
-sectionID
+index
 %7D%0A  
@@ -1702,23 +1702,20 @@
  title=%7B
-rowData
+item
 .name%7D%0A 
@@ -1789,23 +1789,20 @@
  title: 
-rowData
+item
 .name,%0A 
@@ -1843,15 +1843,12 @@
 ' + 
-rowData
+item
 .fil
@@ -2395,24 +2395,24 @@
        %3C
+Flat
 List
-View
 %0A       
@@ -2420,80 +2420,114 @@
     
-renderRow=%7Bthis.renderRow%7D%0A            dataSource=%7Bthis.state.dataSource
+keyExtractor=%7Bthis.keyExtractor%7D%0A            data=%7BARDUINO_PINOUT%7D%0A            renderItem=%7Bthis.renderList
 %7D%0A  

use FlatList replace ListView