'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import {GetQueryString} from '../../utils/Helper';
import YH_Image from '../../../common/components/YH_Image';

const {
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    StyleSheet,
	Platform,
    PixelRatio,
} = ReactNative;

export default class Video extends React.Component {

    constructor(props) {
        super (props);
    }

    shouldComponentUpdate(nextProps,nextState){
        if (Immutable.is(nextProps.resource, this.props.resource) && Immutable.is(nextProps.videoCounts, this.props.videoCounts)) {
            return false;
        } else {
            return true;
        }
    }

    render() {
        let {resource,videoCounts} = this.props;
        if (!resource) {
            return null;
        }
        let counts = videoCounts?videoCounts.toJS():null;
        let list = resource.get('module_data').get('data').toJS();
        let properties = resource.get('module_data').get('properties').toJS();
        let data = list?list[0]:null;
        let videoImage = data?data.pic:'a';
        let title = data?data.text.title:'';
        let detail = data?data.text.content:'';
        let num = 0;
        let urlForVideo = data?data.video:'';
        let isModuleMargin = properties.isModuleMargin;
        let heigthW = isModuleMargin=='1'?backgroundHeight+10:backgroundHeight;
    	let room = GetQueryString(urlForVideo,'room');
        let bgpic = GetQueryString(urlForVideo,'bgpic');

        for(var k in counts) {
            if (room == k) {
                num = counts[k];
            }
        }

        let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
        let url = `http://m.yohobuy.com?openby:yohobuy＝{"action":"go.videolive", "params":{"room":"${room}","bgpic":"${bgpic}"}}`;
        if (yh_exposureData) {
            yh_exposureData = {
                I_INDEX: 0,
                ACTION_URL: url,
                ...yh_exposureData,
            };
        }
		return(
			<View style={{width: backgroundWidth,height:heigthW,backgroundColor: 'white'}}>
	            <TouchableOpacity yh_exposureData={yh_exposureData} activeOpacity={0.5}
	               style={styles.thumbnail}
	                onPress={() => {
	                this.props.onPressVideo && this.props.onPressVideo(room,bgpic);
	            }}>
					<YH_Image
                        url={videoImage}
                        style={styles.thumbnail}
					></YH_Image>
	            </TouchableOpacity>
				<View style={styles.icon}>
                    <Image source={require('../../image/see_ic.png')} style={styles.eyeImage}></Image>
                    <Text style={styles.num} numberOfLines={1}>{num}</Text>
				</View>
				<Text style={styles.title} numberOfLines={1}>{title}</Text>
				<Text style={styles.detail} numberOfLines={2}>{detail}</Text>
            </View>
		);
    }
}

let {width, height} = Dimensions.get('window');
let backgroundWidth = width;
let backgroundHeight = Math.ceil(((363+190)/750)*width);
let imageHeigth = Math.ceil((363/750)*width);

let styles = StyleSheet.create({
	thumbnail: {
		width: backgroundWidth,
		height:imageHeigth,
	},
	title: {
		textAlign: 'left',
		fontSize: 18,
		fontWeight: 'bold',
		color: '#444444',
		marginTop: 15,
		marginLeft: 15,
		width: width - 30,
	},
	detail: {
		textAlign: 'left',
		fontSize: 14,
		color: '#444444',
		marginLeft: 15,
		marginTop: 5,
		width: width - 30,
		backgroundColor: 'white',
        lineHeight: 20,
    },
	icon: {
		 minWidth: 70,
		 height: 20,
		 position: 'absolute',
		 borderRadius: 10,
		 backgroundColor: 'gray',
		 top: 10,
		 right: 15,
         flexDirection: 'row',
         alignItems: 'center',
	},
    eyeImage: {
        marginLeft: 8,
        width: 15,
        height: 12,
    },
    num: {
        marginLeft: 8,
        color: 'white',
        fontSize: 10,
    }
});