'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';

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


export default class ReceiveGiftAlert extends React.Component {
    constructor(props) {
        super(props);
        this._onRequestClose = this._onRequestClose.bind(this);

        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1.key != r2.key,
        });

    }

    _onRequestClose() {
        console.log('_onRequestClose');
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <View style={styles.row}>
                <TouchableOpacity style={styles.row} activeOpacity={0.5} onPress={() => {
                    this.props.onPressCouponItem && this.props.onPressCouponItem(rowData);
                }}>
                    <Image source={require('../images/hyzx_yhq_bg.png')} style={styles.rowIcon} resizeMode={'contain'}/>
                    <Text style={styles.price}>{rowData.get('couponName')}</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        let {data} = this.props;

        return (
            <Modal
                visible={this.props.showGiftAlert}
                animationType={'none'}
                transparent={true}
                onRequestClose={this._onRequestClose}
            >
                <View style={styles.modalStyle}>
                    <View style={styles.container}>
                        <Text style={styles.title}>恭喜你领取成功</Text>
                        <TouchableOpacity style={styles.delete} activeOpacity={0.5} onPress={() => {
                            this.props.hiddenGiftAlert && this.props.hiddenGiftAlert();
                        }}>
                            <Image source={require('../images/close.png')} style={styles.deleteIcon} resizeMode={'contain'}/>
                        </TouchableOpacity>
                        <View style={styles.contentContainer}>
                            <ListView
                                ref='giftList'
                                contentContainerStyle={styles.listContainer}
                                enableEmptySections={true}
                                dataSource={this.dataSource.cloneWithRows(data)}
                                renderRow={this.renderRow}
                            />
                        </View>
                        <View style={styles.detailView}>
                            <TouchableOpacity activeOpacity={0.5} onPress={() => {
                                this.props.onPressLookDetail && this.props.onPressLookDetail();
                            }}>
                                <Text style={styles.detail}>查看详情</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
};

let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
    modalStyle: {
        width: width,
        height: height,
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    container: {
        height: 330,
        width: 280,
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
        borderRadius: 10,
    },

    title: {
        fontWeight: 'bold',
        fontSize: 20,
        color: '#A69073',
        marginTop: 30,
    },

    delete: {
        position: 'absolute',
        height: 19,
        width: 19,
        top: 11,
        right: 11,
    },

    deleteIcon: {
        height: 19,
        width: 19,
    },

    contentContainer: {
        height: 180,
        width: 260,
        marginTop: 16,
    },

    listContainer: {
        alignItems: 'center',
    },

    row: {
        height: 110,
        width: 200,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    rowIcon: {
        height: 90,
        width: 200,
    },

    price: {
        position: 'absolute',
        height: 25,
        width: 180,
        top: 25,
        textAlign: 'center',
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 18,
        color: '#FFFFFF',
        backgroundColor: 'transparent',
    },

    detailView: {
        marginTop: 30,
        borderBottomColor: '#444444',
        borderBottomWidth: 2,
    },

    detail: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 14,
        color: '#444444',
    },

});