'use strict';

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

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

export default class CouponsBagListCell extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {

        let {data} = this.props;

        let nameStyle = data.get('notExpired') ? {color: '#222222'} : {color: '#B0B0B0'};
        let bgStyle = data.get('status') === 0 && data.get('notExpired') ? {backgroundColor: '#A69073'} : {backgroundColor: '#B0B0B0'};
        let textStyle = data.get('status') === 0 && data.get('notExpired') ? {fontFamily: 'PingFang-SC-Bold'} : {fontFamily: 'PingFang-SC-Medium'};
        //"status": 是否已领取 未领取：0，已领取：1；
        //"notExpired": 未过期：true，过期：false；
        let text = data.get('status') === 1 ? '已领取' : data.get('notExpired') ? '领取' : '已失效';
        return (
            <View style={styles.container}>
                <View style={styles.contentContainer}>
                    <Image style={styles.imgIconBg}
                           source={data.get('notExpired') ? require('../images/bg_use.png') : require('../images/bg_used.png')}/>
                    <View style={styles.contentText}>
                        <Text style={[styles.name, nameStyle]}>{data.get('name')}</Text>
                        <Text style={[styles.dateTitle, nameStyle]}>{data.get('dateTitle')}</Text>
                        <Text style={styles.desc}>{data.get('desc')}</Text>
                    </View>
                    <TouchableOpacity activeOpacity={1} onPress={() => {
                        data.get('status') === 0 && data.get('notExpired') && this.props.onPressGiftBag && this.props.onPressGiftBag(data.get('id'));
                    }}>
                        <View style={[styles.buttonBg, bgStyle]}>
                            <Text style={[styles.textStyle, textStyle]}>{text}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
};

let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({

    container: {
        width: width,
        alignItems: 'center',
        backgroundColor: '#444444',
    },
    contentContainer: {
        width: 345,
        height: 70,
        marginLeft: 15,
        marginRight: 15,
        marginBottom: 10,
        borderRadius: 2,
        flexDirection: 'row',
        backgroundColor: 'white',
    },
    imgIconBg: {
        width: 50,
        height: 50,
        marginTop: 10,
        marginLeft: 16,
        marginRight: 10,
        marginBottom: 10,
    },
    contentText: {
        width: 194,
    },
    name: {
        marginTop: 10,
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 12,
        color: '#222222',
    },
    dateTitle: {
        marginTop: 2,
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 10,
        color: '#222222',
    },
    desc: {
        marginTop: 2,
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 10,
        color: '#B0B0B0',
    },
    buttonBg: {
        width: 60,
        height: 26,
        marginTop: 22,
        borderRadius: 30,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#A69073',
    },
    textStyle: {
        fontFamily: 'PingFang-SC-Bold',
        fontSize: 14,
        color: 'white',
    },

});