/**
 * 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 Video from 'react-native-video'
import BottomView from "./BottomView"
import ChatInputBar from './CustomKeyboard/ChatInputBar';
import RichTextWrapper from './CustomKeyboard/RichTextWrapper';

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

    componentDidMount() {
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.selectedPages != this.props.selectedPages){
            this.setState({
                rate:nextProps.selectedPages
            })
        }
    }


    
    render() {
        return (
            <View
                style={styles.View}>


                <Video ref={(ref) => {
                        this.video = ref
                    }}
                    source={require('../../../resources/MP4/1.mp4')}
                    style={styles.fullScreen}
                    rate={this.state.rate?1:0}                          // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.
                    paused={false}
                    volume={1}                   // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
                    muted={true}                  // true代表静音，默认为false.
                    resizeMode='cover'       // 视频的自适应伸缩铺放行为，
                    onLoad={this.onLoad.bind(this)}                       // 当视频加载完毕时的回调函数
                    onLoadStart={this.loadStart.bind(this)}            // 当视频开始加载时的回调函数
                    onProgress={this.onProgress.bind(this)}   //  进度控制，每250ms调用一次，以获取视频播放的进度
                    onEnd={this.onEnd.bind(this)}             // 当视频播放完毕后的回调函数
                    onError={this.videoError.bind(this)}    // 当视频不能加载，或出错后的回调函数
                    onAudioBecomingNoisy={this.onAudioBecomingNoisy.bind(this)}
                    onAudioFocusChanged={this.onAudioFocusChanged.bind(this)}
                    repeat={true}                            // 是否重复播放
                /> 
                {this.state.showMp ? <View style={styles.fullScreen}>
                    <Image source={require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/bg.png')} style={styles.loadingStyle} />
                </View> : undefined}
                <BottomView style={styles.bottomView} onPressInput={this.onPressInput.bind(this)}/>

                <ChatInputBar ref="chatInputBar" isVisible={true} onSend={(text) => this._onSendMsg(text)}/>


            </View>
        );
    }
    loadStart() {
        //需要 添加背景图片
        console.log("loadStart=======")
    }
    onProgress() {

    }
    onEnd() {

    }
    onError() {
        console.log("onError=======")
    }
    onAudioBecomingNoisy() {

    }
    onAudioFocusChanged() {

    }
    onLoad() {
        console.log("当视频加载完毕时的回调函数")
        this.setState({
            showMp: false
        })
    }
    videoError() {

    }

    onPressInput(){
        console.log("text-========")
        this.refs.chatInputBar.openInputBar();
    }
    _onSendMsg(text){
        console.log("text-========",text)
      }

}
const styles = StyleSheet.create({

    View: {
        width: ScreenDimensions.width,
        height: ScreenDimensions.height,
        backgroundColor:"yellow"
    },
    fullScreen: {
        width: ScreenDimensions.width,
        height: ScreenDimensions.height,
        
    },
    loadingStyle: {
        position: 'absolute',
        top: -ScreenDimensions.height,
        left: 0,
        bottom: 0,
        right: 0,
    },
    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:{

    },
    bottomView:{
        position: 'absolute',
        top: ScreenDimensions.height/2,
        left: 0,
        
        right: 0,
        backgroundColor:"yellow",
        width:ScreenDimensions.width,
        height:ScreenDimensions.height/2,
    }
})