'use strict';

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

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

import YH_Image from '../../common/components/YH_Image';

export default class CouponViewModal extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal
                visible={this.props.show}
                animationType={'none'}
                transparent={true}
                onRequestClose={() => {
                }}>
                <View style={styles.modalContainer}>
                    <TouchableWithoutFeedback onPress={() => {
                      this.props.showCouponView && this.props.showCouponView(false);
                    }}>
                      <View style={styles.topView}/>
                    </TouchableWithoutFeedback>

                    <View style={styles.shareView}>
                        <TouchableOpacity activeOpacity={1} onPress={() => {
                            this.props.didTouchCouponBanner && this.props.didTouchCouponBanner();
                        }}>
                        <YH_Image resizeMode={'stretch'} style={{width: width, height: 256*DEVICE_WIDTH_RATIO}} url={this.props.data}></YH_Image>
                        </TouchableOpacity>
                    </View>
                </View>

            </Modal>
        );
    }
};

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;

let styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        width: width,
        height: height,
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
    },
    topView: {
      flex: 1,
    },
    shareView: {
      width,
      height: 256*DEVICE_WIDTH_RATIO,
      backgroundColor: 'white',
      alignItems: 'center',
    },
});