/**
 * Created by zack on 2018/4/19.
 */
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableHighlight,
    ImageBackground,
} from 'react-native'
import React, { Component } from 'react'
import ScreenDimensions from '../../../utils/ScreenDimensions'
import ScreenDimensionsClientHeight from '../../../utils/ScreenDimensions'
import NavigationBarHeight from '../../../utils/NavigationBarHeight'
import TabBarHeight from '../../../utils/TabBarHeight'
import RefreshInfiniteListView from '../../../utils/RefreshInfiniteListView'
import VideoDetailsCellViewContorller from "./VideoDetailsCellViewContorller"


//ScreenDimensions.clientHeight 
export default class VideoDetailsViewContorller extends Component {
    constructor(props) {
        super(props)
        this.state = {
            rate: 1,
            showMp: true,
            selectedPages: 0

        }
    }
    componentWillMount(){
        // StatusBar.setHidden(true);
    }
    componentWillUnmount(){
        // StatusBar.setHidden(false);
        this.showTabBar();
        this.props.navigator.setStyle({
			statusBarHidden: false,
		})
    }
    hideTabBar() {
		this.props.navigator.toggleTabs({
			to:'hidden',
			animated: true
		})
	}

	showTabBar() {
		this.props.navigator.toggleTabs({
			to:'shown',
			animated: true
		})
	}



    componentDidMount() {
        this.props.navigator.setStyle({
			statusBarHidden: true,
        })
        this.hideTabBar();
        let data = []
        for (var i = 1; i < 5; i++) {
            data.push({ key: i - 1, index: i - 1 });
        }
        this.list.setData(data)
    }

    render() {
        return (
            <View
                style={styles.View}>
                <RefreshInfiniteListView
                    style={styles.View}
                    numColumns={1}
                    pagingEnabled={true}
                    horizontal={true}
                    showsHorizontalScrollIndicator={true}
                    ref={this.listRef.bind(this)}
                    onScroll={this._onScroll.bind(this)}
                    renderItem={this.renderRow.bind(this)}
                    onRefresh={this.onRefresh.bind(this)}
                    onEndReached={this.onInfinite.bind(this)}>
                </RefreshInfiniteListView>

                <View style={styles.topStyle}>
                    <TouchableHighlight
                        underlayColor={"rgba(255,255,255,0)"}
                        onPress={() => {
                            this.props.navigator.pop({
                                animated: true,
                                animationType: 'slide-horizontal',
                            });
                        }}>
                        <View style={styles.cellLeftStyle}>
                            <Image source={require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/left.png')} style={styles.btn_backStyle} />
                        </View>
                    </TouchableHighlight>
                    <TouchableHighlight
                        underlayColor={"rgba(255,255,255,0)"}
                        onPress={this.onPressMore.bind(this)}>
                        <View style={styles.cellRightStyle}>
                            <Image source={require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/more.png')} style={styles.cellRightStyle} />
                        </View>
                    </TouchableHighlight>
                </View>


            </View>
        );
    }
    onPress() {
        //返回
        console.log("返回")
        this.props.navigator.pop({
            animated: true,
            animationType: 'slide-horizontal',
        });

    }
    listRef(node) {
        this.list = node;
    }
    onRefresh() {
        //下拉刷新
        this.list.setRefreshing(true);
        this.requestData(false)
    }
    onInfinite() {
        //上拉加载
        this.requestData(true)
    }
    requestData(isLoadMore) {
        this.list.setRefreshing(false);
        if (isLoadMore) {
            console.log("上啦中=======")
        } else {
            console.log("下啦中=======")
        }


    }
    renderRow({ item, index }) {
        return (
            <VideoDetailsCellViewContorller selectedPages={index === this.state.selectedPages} style={styles.View} />
        )
    }
    _onScroll(e) {
        if (e % ScreenDimensions.width === 0) {
            this.setState({
                selectedPages: e / ScreenDimensions.width
            })
        }
    }
    onPressMore(){

    }

}
const styles = StyleSheet.create({
    View: {
        width: ScreenDimensions.width,
        height: ScreenDimensions.height,
    },
    btn_backStyle: {
        width: 25 / 2,
        height: 49 / 2,
        marginLeft: 21,
        marginTop: 22
    },
    topStyle: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height: 88,
        backgroundColor: 'rgba(255,255,255,.1)',
        justifyContent: "space-between",
        flexDirection: "row",
    },
    cellLeftStyle: {

    },
    cellRightStyle: {
       width:47/2,
       height:4,
       marginRight:21,
       marginTop:15,
    }
})