import React, {Component, PropTypes} from 'react';
import {
  FlatList,
  StyleSheet,
  View,
  Text,
  Dimensions,
  TouchableHighlight
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import axios from 'axios';
import FastImage from 'react-native-fast-image';

import Loading from '../../wdui/loading/Loading';
import Card from '../../wdui/Card';

const deviceWidth = Dimensions.get('window').width;

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

  static navigationOptions = {
    title: '首页推荐',
    tabBarIcon: (props) => (
        <Icon name='home' size={24} color={props.tintColor} />
      )
  };

  static propTypes = {
    navigate: PropTypes.func.isRequired
  };

  constructor() {
    super();
    this.state = {
      loading: true,
      nextLink: null,
      noMore: false,
      data: []
    };
  }

  componentWillMount() {
    axios.get('https://www.wandianshenme.com/api/play/')
      .then(response => {
        this.setState({
          nextLink: response.next ? response.next : null,
          data: response.data,
          loading: false
        });
      });
  }

  onEndReached() {
    if (!this.state.nextLink) {
      this.setState({
        noMore: true
      });
      return;
    }
    axios.get(this.state.nextLink)
      .then(response => {
        this.setState({
          nextLink: response.next ? response.next : null,
          data: this.state.data.concat(response.data),
          loading: false
        });
      });
  }

  keyExtractor = (item, index) => `key${index}`;

  renderList = ({item}) => {
    console.log('https://www.wandianshenme.com/static/media/' + item.featured_image);
    return (
      <TouchableHighlight
        key={this.keyExtractor}>
        <Card
          title={ item.title }>
          <View style={{paddingBottom: 15}}>
            { item.featured_image
              ? <FastImage
                style={{width: deviceWidth - 60, height: (deviceWidth - 60) * 0.4}}
                resizeMode={FastImage.resizeMode.cover}
                source={{
                  uri: 'https://www.wandianshenme.com/static/media/' + item.featured_image
                }}
              />
              : <Text>{ item.featured_image }</Text>
            }
          </View>

          <Text style={{marginBottom: 10}}>
            { item.description }
          </Text>
        </Card>
      </TouchableHighlight>
    );
  };

  render() {
    if (this.state.loading) {
      return <Loading text={'数据加载中'} />;
    }

    return (
      <View style={styles.container}>
        <View>
          <FlatList
            keyExtractor={this.keyExtractor}
            data={this.state.data.results}
            renderItem={this.renderList}
            onEndReached={this.onEndReached.bind(this)}
          />

          { this.state.noMore
            ? <View><Text>已无更多内容</Text></View> : <View />
          }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

export default HomeView;

@@ -1747,24 +1747,41 @@
 Extractor%7D%3E%0A
+        %3CView%3E%0A  
         %3CCar
@@ -1788,24 +1788,26 @@
 d%0A          
+  
 title=%7B item
@@ -1816,16 +1816,18 @@
 itle %7D%3E%0A
+  
         
@@ -1871,24 +1871,26 @@
             
+ 
+ 
 %7B item.featu
@@ -1913,16 +1913,18 @@
         
+  
 ? %3CFastI
@@ -1944,16 +1944,18 @@
         
+ 
+ 
 style=%7B%7B
@@ -2030,16 +2030,18 @@
         
+  
 resizeMo
@@ -2088,16 +2088,18 @@
         
+ 
+ 
 source=%7B
@@ -2100,16 +2100,18 @@
 urce=%7B%7B%0A
+  
         
@@ -2209,19 +2209,23 @@
         
+ 
+ 
 %7D%7D%0A
+  
         
@@ -2229,24 +2229,26 @@
          /%3E%0A
+  
             
@@ -2292,34 +2292,38 @@
 xt%3E%0A            
-%7D%0A
+  %7D%0A  
           %3C/View
@@ -2335,16 +2335,18 @@
         
+  
 %3CText st
@@ -2367,24 +2367,26 @@
 ttom: 10%7D%7D%3E%0A
+  
             
@@ -2416,24 +2416,26 @@
         
+  
 %3C/Text%3E%0A
         
@@ -2418,32 +2418,34 @@
         %3C/Text%3E%0A
+  
         %3C/Card%3E%0A
@@ -2444,16 +2444,32 @@
 %3C/Card%3E%0A
+        %3C/View%3E%0A
       %3C/

fix touch highlight issue