/**
 * Created by Sean on 2018/5/9.
 */
import {
	View,
	Text,
	StyleSheet,
	TouchableOpacity,
	ScrollView,
	SectionList
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import CAVideoBannerView from './CAVideoBannerView';
import CAVideoListHeaderView from './CAVideoListHeaderView';
import CAVideoListRow from './CAVideoListRow';
import CAVideoDetailView from './CAVideoDetailView';
import HttpTools from '../../../network/HttpTools';

const sections = [
    { key: "推荐视频", image: require('../../../resources/Play/Video/video.png'), data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
    { key: "脱口秀", image: require('../../../resources/Play/Video/speak.png'), data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
    { key: "外教课", image: require('../../../resources/Play/Video/book.png'), data: [{ title: "成吉思汗" }, { title: "超市快递" }] },
    { key: "音乐", image: require('../../../resources/Play/Video/music.png'), data: [{ title: "王磊" }, { title: "王者荣耀" }, { title: "往事不能回味" },{ title: "王小磊" }, { title: "王中磊" }, { title: "王大磊" }] },
];

export default class CAVideoViewController extends Component {
	constructor(props) {
		super(props)
	}

	componentDidMount() {

	}

	hideTabBar() {
		this.props.navigator.toggleTabs({
			to:'hidden',
			animated: true
		})
	}

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

	_jumpToBannerVideoPage = () => {
		console.log(this.props.onPressBannerBack)
		if(this.props.onPressBannerBack) {
			this.props.onPressBannerBack()
		}

	} 

	_renderItem = (info) => {
        let txt = '  ' + info.item.title;
        return(
            <CAVideoListRow title={txt}/>
        );
    }
     
    _sectionComp = (info) => {
        let txt = info.section.key;
        let img = info.section.image
        return(
            <CAVideoListHeaderView title={txt} image={img}/>
        );
	}
	
	_renderHeaderComponent = () => {
		return (
			<CAVideoBannerView onBannerPress={this._jumpToBannerVideoPage}/>
		);
	}

	render() {
		return(
			<SectionList
				style={styles.ScrollView}
				renderSectionHeader={this._sectionComp}
				renderItem={this._renderItem}
				sections={sections}
				keyExtractor = {(item,index) =>{
					return 'key' + item.key + index
				}}
				ListHeaderComponent={this._renderHeaderComponent}
			/>
		);
	}

}

const styles = StyleSheet.create({
	View: {
		flex: 1,
		flexDirection: 'column',
		width: ScreenDimensions.width,
		backgroundColor: 'white'
	},
	ScrollView: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
		backgroundColor: '#ffffff',
	},
})