'use strict';

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

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


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

    render() {
      let { unionType } = this.props;
        return (
            <Modal
                visible={this.props.show}
                animationType={'none'}
                transparent={true}
                onRequestClose={() => {
                }}>
                <View style={styles.modalContainer}>
                    <TouchableWithoutFeedback onPress={() => {
                      this.props.showShareView && this.props.showShareView(false);
                    }}>
                      <View style={styles.topView}/>
                    </TouchableWithoutFeedback>
                    <View style={styles.shareView}>
                      <View style={styles.buttons}>
                        <TouchableOpacity activeOpacity={0.5} style={styles.button1} onPress={() => {
                          this.props.shareMiniApp && this.props.shareMiniApp();
                        }}>
                            <Image source={unionType ? require('../images/unionShare_wx_icon.png') : require('../images/weixin.png')} style={styles.icon} />
                            <Text style={styles.text}>分享给好友</Text>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.5} style={styles.button2} onPress={() => {
                          this.props.showSnapshootShare && this.props.showSnapshootShare(true);
                        }}>
                          <Image source={unionType ? require('../images/unionShare_qr_icon.png') : require('../images/pengyou.png')} style={styles.icon} />
                          <Text style={styles.text}>微信快照</Text>
                        </TouchableOpacity>
                      </View>
                      <View style={styles.line}/>
                      <TouchableOpacity activeOpacity={0.5} style={styles.cancel} onPress={() => {
                        this.props.showShareView && this.props.showShareView(false);
                      }}>
                        <Text style={styles.canceltext}>取消</Text>
                      </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: 171*DEVICE_WIDTH_RATIO,
      backgroundColor: 'white',
      alignItems: 'center',
    },
    image :{
      width: 305*DEVICE_WIDTH_RATIO,
      height: 88*DEVICE_WIDTH_RATIO,
      marginTop: 25*DEVICE_WIDTH_RATIO,
    },
    buttons: {
     width,
     height: 115*DEVICE_WIDTH_RATIO,
     alignItems: 'center',
     flexDirection: 'row',
   },
   button1: {
    marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
    alignItems: 'center',
   },

  button2: {
   marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
   alignItems: 'center',
  },
   icon: {
     width: 45*DEVICE_WIDTH_RATIO,
     height: 45*DEVICE_WIDTH_RATIO,
   },
   text: {
     marginTop: 8*DEVICE_WIDTH_RATIO,
     fontSize: 12,
     color: '#444444',
     width: 90*DEVICE_WIDTH_RATIO,
     textAlign: 'center',
   },
   line: {
     width: width - 52,
     height: 1,
     backgroundColor: '#CCCCCC',
   },
   cancel: {
     width,
     height: 54*DEVICE_WIDTH_RATIO,
     justifyContent: 'center',
     alignItems: 'center',
   },
   canceltext: {
     fontSize: 17,
     color: '#444444',
   },
});