'use strict';
import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    Image,
    ToastAndroid,
    ListView,
} from 'react-native';
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
var movieData=new Array();
class AwesomeProject extends Component {
    //返回當前顯示的view
    render() {
        // ToastAndroid.show(JSON.stringify(this.state.loaded),ToastAndroid.SHORT)
        //由于剛開始的的時候設置loaded為false，所以第一次會加載等待的view
        if (!this.state.loaded) {
            return this.renderLoadingView();
        }

        return(
            <ListView
                initiaListSize={1}
                onEndReachedThreshold={10}
                //設置ListView的數(shù)據(jù)源
                dataSource={this.state.dataSource}
                //listview的回掉方法
                renderRow={this.renderMovie}
                //監(jiān)聽滑動到底部的方法 注意ES6的寫法必須要bind要不然this對象不對
                onEndReached={this.onLoadeMore.bind(this)}
                style={styles.listView}
            />
        );
    }

    onLoadeMore() {
        this.fetchData();

    }


    //加載等待的view
    renderLoadingView() {
        return (
            <View style={styles.container}>
                <Text>
                    Loading movies...
                </Text>
            </View>
        );
    }
    //獲取到數(shù)據(jù)加載到listview控件上顯示
    renderMovie(movie) {
        return (
            <View style={styles.container}>
                <Image
                    source={{uri: movie.posters.thumbnail}}
                    style={styles.thumbnail}
                />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.year}</Text>
                </View>
            </View>
        );
    }
    //js組件的構(gòu)造函數(shù)侨艾，js的生命周期
    constructor(props) {
        super(props);
        //state內(nèi)部維護的一個狀態(tài)沸移，我們剛開始進來的為空，來加載空的view
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            //自己定義的字段標記是否已經(jīng)加載過了
            loaded: false,
        };

    }

    //rn的生命周期，初始化的時候會執(zhí)行
    componentDidMount() {
        //去拉取電影的接口的數(shù)據(jù)
        this.fetchData();
    }


    onResoutData(responseData){
        var concat = movieData.concat(responseData.movies);
        movieData=concat;
        ToastAndroid.show(movieData.length+"",ToastAndroid.SHORT)
        this.setState({
            //將獲取到的數(shù)據(jù)賦值給dataSource
            dataSource: this.state.dataSource.cloneWithRows(movieData),
            //標記已經(jīng)加載成功完畢
            loaded: true,
        });
    }




    fetchData() {
        //這個是js的訪問網(wǎng)絡的方法
        fetch(REQUEST_URL)
            //ES6的寫法左邊代表輸入的參數(shù)右邊是邏輯處理和返回結(jié)果
            .then((response) => response.json())
            .then((responseData) => {
                this.onResoutData(responseData);
            })
    }
}

const styles = StyleSheet.create({
    title: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: 'center',
    },
    year: {
        textAlign: 'center',
    },
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    rightContainer: {
        flex: 1,
    },
    thumbnail: {
        width: 53,
        height: 81,
    },
    listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
    },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);