'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    Button,
    ListView,
    ScrollView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Platform,
    InteractionManager,
} from 'react-native';

import CouponAlertView from './CouponAlertView';



export default class Birth extends Component {

    constructor(props) {
        super(props);
    }


    render() {

        let {showAlert, notSupportReasons, notSupportReasonsTitle, notSupportReasonsMessage} = this.props;

        return (
            <View style={styles.container}>
                <Image source={require('../../images/birth_bg.png')} style={styles.contentBg} />

                <TouchableOpacity style={styles.getCouponContainer} activeOpacity={1} onPress={() => { this.props.onPressGetCoupon && this.props.onPressGetCoupon()}}>
                    <Text style={styles.getCouponText}>立即领取生日福利券</Text>
                </TouchableOpacity>

                <View style={styles.tipContainer}>

                    <Text style={styles.tipTitle}>- 领 取 说 明 -</Text>

                    <View style={styles.tipContentContainer}>
                        <Text style={styles.tipContentTitle}>领取时间:</Text>
                        <Text style={[styles.tipContentDescContainer, styles.tipContentDesc]}>生日当月可领取,以您个人信息填写的生日为准。</Text>
                    </View>

                    <View style={styles.tipContentContainer}>
                        <Text style={styles.tipContentTitle}>领取详情:</Text>
                        <Text style={[styles.tipContentDescContainer, styles.tipContentDesc]}>生日券,领取之日起15天内有效,过期不补偿,领取后请尽快使用。</Text>
                    </View>

                    <View style={styles.tipContentContainer}>
                        <Text style={styles.tipContentTitle}>领取资格:</Text>
                        <Text style={[styles.tipContentDescContainer, styles.tipContentDesc]}>您在领取时,必须是有货VIP银卡、金卡、白金卡</Text>
                    </View>

                    <View style={styles.tipContentContainer}>
                        <Text style={styles.tipContentTitle}></Text>
                        <View style={styles.tipContentDescContainer}>
                            <Text style={styles.tipContentDesc}>用户</Text>
                            <TouchableOpacity activeOpacity={1} onPress={() => { this.props.onPressGoVip && this.props.onPressGoVip() }}>
                                <Text style={styles.tipContentLinkDesc}>(了解您当前的VIP级别),</Text>
                            </TouchableOpacity>
                            <Text style={styles.tipContentDesc}>且在个人信息中已</Text>
                        </View>
                    </View>

                    <View style={styles.tipContentContainer}>
                        <Text style={styles.tipContentTitle}></Text>
                        <View style={styles.tipContentDescContainer}>
                            <Text style={styles.tipContentDesc}>完善生日信息</Text>
                            <TouchableOpacity activeOpacity={1} onPress={() => { this.props.onPressComplete && this.props.onPressComplete()}}>
                                <Text style={styles.tipContentLinkDesc}>(查看/完善个人信息)。</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>

                <Text style={styles.tipBottomMsg}>温馨提示：同一用户一年内（365天）仅可领取一次生日特惠哦！</Text>

                {
                    showAlert ?
                        <CouponAlertView
                            notSupportReasons={notSupportReasons}
                            notSupportReasonsTitle={notSupportReasonsTitle}
                            notSupportReasonsMessage={notSupportReasonsMessage}
                            onPressClose={this.props.onPressClose} />
                    : null
                }

            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
const radio = 942 / 640;


let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#c30d23',
    },

    contentBg: {
        width: width,
        height: Math.ceil(width*radio),
    },

    getCouponContainer:{
        position: 'absolute',
        width: width,
        top: Math.ceil(width*radio*(525 / 942)) - (Platform.OS === 'ios'? 10 : 15),
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'transparent',
    },

    getCouponText:{
        fontSize: 20,
        color: '#ee9815',
        fontWeight: 'bold',
    },

    tipContainer:{
        position: 'absolute',
        top: 310 * DEVICE_WIDTH_RATIO,
        width: width,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 25 * DEVICE_WIDTH_RATIO,
        paddingRight: 18 * DEVICE_WIDTH_RATIO,
    },

    tipTitle:{
        fontSize: 20,
        color: '#ffffff',
        fontWeight: 'bold',
        fontStyle: 'italic',
        backgroundColor: 'transparent',
    },

    tipContentContainer:{
        width: width - 43 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
        flexWrap: 'wrap',
    },

    tipContentTitle:{
        fontSize: 12,
        color: '#ffffff',
        fontWeight: 'bold',
        width: 50 * DEVICE_WIDTH_RATIO,
        lineHeight: Math.ceil(18 * DEVICE_WIDTH_RATIO),
    },

    tipContentDescContainer:{
        width: width - 93 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
    },

    tipContentDesc:{
        fontSize: 12,
        color: '#ffffff',
        lineHeight: Math.ceil(18 * DEVICE_WIDTH_RATIO),
    },

    tipContentLinkDesc:{
        fontSize: 12,
        color: '#ffffff',
        lineHeight: Math.ceil(18 * DEVICE_WIDTH_RATIO),
        textDecorationLine: 'underline',
        fontWeight: 'bold',
    },

    tipBottomMsg:{
        position: 'absolute',
        bottom: 10 * DEVICE_WIDTH_RATIO,
        width: width,
        fontSize: 9,
        color: '#000000',
        fontWeight: 'bold',
        textAlign: 'center',
        textDecorationLine: 'underline',
    },

});