'use strict';

import React from 'react';
import ReactNative from 'react-native';

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

export default class YohoCoinNumHeader extends React.Component {

    constructor(props) {
        super (props);
    }

    componentDidMount() {

    }

    render() {
		let resource = this.props.resource?this.props.resource.toJS():null;
		if (!resource) {
			return null;
		}
		let notice = resource.notice;
		let yohocoin_num = resource.yohocoin_num;
		let yohoCoinCode = resource.yohoCoinCode;

		let heigth_t = notice == '' ? headerHeight : headerHeight + noticeViewHeight;
		return (
			<View style={{width: width,height: heigth_t,backgroundColor: 'white',}}>
				<View style={{width: width,height: headerHeight,backgroundColor: 'white',}}>
					<View style={styles.numView}>
						<Text style={styles.numText}>{yohocoin_num}</Text>
					</View>
					<View style={styles.numDetailView}>
						<Image style={styles.icon} source={require('../../image/yohocoin_icon.png')}/>
						<Text style={styles.numDetailText}>个有货币</Text>
					</View>
					<View style={styles.button}>
						<TouchableOpacity
						   activeOpacity={1}
						   style={{width: 100, 	height: ( 38/154 ) * 100}}
						   onPress={() => {
								this.props.onPressYohoCoinDetail && this.props.onPressYohoCoinDetail(yohoCoinCode)
						   }}
					   	>
							<Image style={styles.image} source={require('../../image/check_detail_btn.png')}/>
						</TouchableOpacity>
					</View>
				</View>
				{notice != '' ?
					<View style={styles.notice}>
						<Image style={styles.noticeIcon} source={require('../../image/yohocoin_notice_ic.png')}/>
						<Text style={styles.noticeText}>{notice}</Text>
					</View>
				: null}
			</View>
		)
    }
};

let {width, height} = Dimensions.get('window');
let headerHeight = Math.ceil((250 / 640) * width);
let noticeViewHeight = Math.ceil((70 / 640) * width);

const styles = StyleSheet.create({
	numView: {
		marginTop: 20,
		width: width,
		height: 60,
		backgroundColor: 'white',
		alignItems: 'center',
		justifyContent: 'center',
	},
	numText: {
		width:width,
        backgroundColor: 'white',
		color: 'rgb(206,11,36)',
		fontSize: 60,
		textAlign: 'center',
	},
	numDetailView: {
		width: width,
		height: 25,
		backgroundColor: 'white',
		alignItems: 'center',
		justifyContent: 'center',
		flexDirection: 'row',
	},
	icon: {
		width: 15,
		height: 15,
	},
	numDetailText: {
		backgroundColor: 'white',
		color: 'gray',
		fontSize: 14,
		textAlign: 'center',
	},
	button: {
		marginTop: 7,
		width: width,
		height: 40,
		backgroundColor: 'white',
		alignItems: 'center',
		justifyContent: 'center',
	},
	image: {
		width: 100,
		height: ( 38/154 ) * 100,
	},
	notice: {
		width: width,
		height: noticeViewHeight,
		backgroundColor: 'rgb(217,217,217)',
		flexDirection: 'row',
		alignItems: 'center',
	},
	noticeIcon: {
		width: 15,
		height: 15,
		marginLeft: 15,
	},
	noticeText: {
		backgroundColor: 'transparent',
		color: 'rgb(206,11,36)',
		fontSize: 11,
		marginLeft: 20,
	}
});