'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';
class AwesomeProject extends Component {
    //返回當(dāng)前顯示的view
    render() {
        ToastAndroid.show(JSON.stringify(this.state.loaded),ToastAndroid.SHORT)
        //由于剛開始的的時候設(shè)置loaded為false，所以第一次會加載等待的view
        if (!this.state.loaded) {
            return this.renderLoadingView();
        }

        return(
            <ListView
                //設(shè)置ListView的數(shù)據(jù)源
                dataSource={this.state.dataSource}
                //listview的回掉方法
                renderRow={this.renderMovie}
                //監(jiān)聽滑動到底部的方法
                onEndReached={()=> {this.fetchData()}}
                style={styles.listView}
            />
        );
    }
    //加載等待的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)部維護(hù)的一個狀態(tài)，我們剛開始進(jìn)來的為空，來加載空的view
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            //自己定義的字段標(biāo)記是否已經(jīng)加載過了
            loaded: false,
        };

    }

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


    fetchData() {
        //這個是js的訪問網(wǎng)絡(luò)的方法
        fetch(REQUEST_URL)
            //ES6的寫法左邊代表輸入的參數(shù)右邊是邏輯處理和返回結(jié)果
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    //將獲取到的數(shù)據(jù)賦值給dataSource
                    dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                    //標(biāo)記已經(jīng)加載成功完畢
                    loaded: true,
                });
            })
            .done();
    }
}

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);