'use strict';

import React from 'react';
import ReactNative , {Platform}from 'react-native';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';
import { captureRef } from "react-native-view-shot";

const {
    AppRegistry,
    StyleSheet,
    Image,
    View,
    Dimensions,
    TouchableOpacity,
    Modal,
    Text,
    CameraRoll,
    Alert,
    ScrollView,
} = ReactNative;


export default class SnapshootShare extends React.Component {
    constructor(props) {
        super(props);
        this.saveImage = this.saveImage.bind(this);
        this.shareImage = this.shareImage.bind(this);
    }

    shareImage(shareType){
        if (Platform.OS === 'ios') {
            ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
                (uri) => {
                    this.props.shareSnapshootAction && this.props.shareSnapshootAction(shareType,uri);
                }).catch(
                (error) => {
                    Alert.alert('图片生成失败!')
                });

        } else {
            captureRef(this.refs.container, {format: 'png', quality: 10}).then(
                (uri) => {
                    this.props.shareSnapshootAction && this.props.shareSnapshootAction(shareType,uri);
                }).catch(
                (error) => {
                    Alert.alert('图片生成失败!')
                });
        }
    }

    saveImage(){
        if (Platform.OS === 'ios'){
            ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
                (uri) => {
                    var promise = CameraRoll.saveToCameraRoll(uri);
                    promise.then(function(result) {
                        Alert.alert('保存成功!')
                    }).catch(function(error) {
                        Alert.alert('保存失败!')
                    });
                }).catch(
                (error) => {
                    Alert.alert('保存失败!')
                });
        } else {
            captureRef(this.refs.container, {format: 'png', quality: 10}).then(
                (uri) => {
                    var promise = CameraRoll.saveToCameraRoll(uri);
                    promise.then(function(result) {
                        Alert.alert('保存成功!')
                    }).catch(function(error) {
                        Alert.alert('保存失败!')
                    });
                }).catch(
                (error) => {
                    Alert.alert('保存失败!')
                });
        }
    }

    render() {
      let { groupDetail ,qrCode, unionType} = this.props;
      let productDetail = groupDetail ? groupDetail.toJS():null;
      if(!productDetail){
        return null;
      }
      let lackNum = productDetail.lackNum;
      let membershipItems = productDetail.membershipItems;
      let resource = membershipItems ? membershipItems[0]: null;

      if (!resource) {
        return null;
      }
      let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,218*DEVICE_WIDTH_RATIO, 282*DEVICE_WIDTH_RATIO, 2) : '';
      let productGroupPrice = resource.productGroupPrice;
      let productName = resource.productName;
      let productSalePrice = resource.productSalePrice;
      let productSkn = resource.productSkn;
      let perpleNum = membershipItems.length + lackNum;
      let nickName = resource.nickName;


        return (
            <Modal
                visible={this.props.show}
                animationType={'none'}
                transparent={true}
                onRequestClose={() => {
                }}>
                <View style={styles.modalContainer}>
                    <ScrollView
                      style={styles.scrollView}
                      vertical={true}
                      showsVerticalScrollIndicator={false}
                    >
                      <View style={styles.container} ref='container'>

                            <Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />
                            <View style={styles.product}>
                                <YH_Image style={styles.productimage} url={productIcon}></YH_Image>
                                <View style={styles.productDetail}>
                                    <View style={styles.productDetailTop}>
                                        <Text style={styles.productDetailTopText}>{productName}</Text>
                                    </View>
                                    <View style={styles.productDetailBottom}>
                                        <Image source={require('../images/Group5.png')} style={styles.priceIcon} />
                                        <Text style={styles.price}>{productGroupPrice}</Text>
                                        <Text style={[styles.price2, {textDecorationLine: 'line-through'}]}>{productSalePrice}</Text>
                                    </View>
                                </View>
                                <Image source={require('../images/Page.png')} resizeMode={'contain'} style={styles.mianyouIcon} />
                            </View>
                            <View style={styles.bottom}>
                                <Image source={{uri: qrCode}} resizeMode={'contain'} style={styles.qr} />
                                <View style={styles.bottomDetail}>
                                    <View style={styles.titleV}>
                                        <Text style={[styles.titleText, styles.titleWidth]} numberOfLines={1}>{nickName}</Text>
                                        <Text style={styles.titleText}>邀请你拼潮货</Text>
                                    </View>
                                    <Text style={styles.tipDetailText}>长按图片识别小程序参团</Text>
                                </View>
                            </View>
                        </View>
                      <View style={styles.spaceV}/>
                      </ScrollView>
                  <View style={styles.shareView}>
                    <View style={styles.buttons}>
                      <TouchableOpacity activeOpacity={0.5} style={styles.button1} onPress={() => {
                        this.shareImage && this.shareImage('WXSceneSession');
                      }}>
                          <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.shareImage && this.shareImage('WXSceneTimeline');
                      }}>
                        <Image source={unionType ? require('../images/unionShare_timeline_icon.png') : require('../images/share_timeline_icon.png')} style={styles.icon} />
                        <Text style={styles.text}>微信朋友圈</Text>
                      </TouchableOpacity>
                    </View>
                    <View style={styles.line}/>
                    <TouchableOpacity activeOpacity={0.5} style={styles.save} onPress={() => {
                      this.saveImage && this.saveImage();
                    }}>
                      <Text style={styles.savetext}>保存图片</Text>
                    </TouchableOpacity>
                  </View>

                  <TouchableOpacity activeOpacity={0.5} style={styles.cancelBtn} onPress={() => {
                    this.props.showSnapshootShare && this.props.showSnapshootShare(false);
                  }}>
                    <Image source={require('../images/imageShareClose.png')} style={styles.cancelBtnicon} resizeMode={'contain'}/>
                  </TouchableOpacity>

                </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,
    },
    backContainer: {
        flex: 1,
        width: width,
        height: height,
        alignItems: 'center',
        backgroundColor: 'white',
    },

    container: {
        width,
        height,
        backgroundColor: 'white',
        alignItems: 'center',
    },

    scrollView: {
        backgroundColor: 'white',
    },
    spaceV: {
        backgroundColor: 'white',
        height: 150*DEVICE_WIDTH_RATIO,
        width,
    },

    logo: {
        height: 22*DEVICE_WIDTH_RATIO,
        width: 112*DEVICE_WIDTH_RATIO,
        marginTop: 37*DEVICE_WIDTH_RATIO,
    },

    productimage: {
        height: 433*DEVICE_WIDTH_RATIO,
        width: 325*DEVICE_WIDTH_RATIO,
    },

    product: {
        height: 433*DEVICE_WIDTH_RATIO,
        width: 325*DEVICE_WIDTH_RATIO,
        marginTop: 24*DEVICE_WIDTH_RATIO,
    },
    productDetail: {
        height: 80*DEVICE_WIDTH_RATIO,
        width: 325*DEVICE_WIDTH_RATIO,
        backgroundColor: 'rgba(0,0,0,0.4)',
        position: 'absolute',
        bottom: 0,
    },
    productDetailTop: {
        height: 20*DEVICE_WIDTH_RATIO,
        width: 325*DEVICE_WIDTH_RATIO,
        marginTop: 14*DEVICE_WIDTH_RATIO,
        justifyContent: 'center',
        alignItems: 'center',
    },
    productDetailTopText: {
        fontSize: 14,
        color: '#FFFFFF',
    },
    productDetailBottom: {
        height: 30*DEVICE_WIDTH_RATIO,
        width: 325*DEVICE_WIDTH_RATIO,
        marginTop: 7*DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    priceIcon: {
        height: 17,
        width: 50,
    },
    price: {
        fontSize: 24,
        color: '#FFFFFF',
        marginLeft: 15*DEVICE_WIDTH_RATIO,
        fontWeight: 'bold',
    },
    price2: {
        fontSize: 14,
        lineHeight: 14,
        color: '#B0B0B0',
        alignItems: 'center',
        marginLeft: 13*DEVICE_WIDTH_RATIO,
        height: 14,
        marginTop: 2,
    },

    mianyouIcon: {
        position: 'absolute',
        top: 262*DEVICE_WIDTH_RATIO,
        right: 28*DEVICE_WIDTH_RATIO,
        height: 63*DEVICE_WIDTH_RATIO,
        width: 63*DEVICE_WIDTH_RATIO,
    },

    bottom: {
        height: 141*DEVICE_WIDTH_RATIO,
        width: 325*DEVICE_WIDTH_RATIO,
        alignItems: 'center',
        flexDirection: 'row',
    },
    qr: {
        height: 80*DEVICE_WIDTH_RATIO,
        width: 80*DEVICE_WIDTH_RATIO,
    },

    bottomDetail: {
        height: 80*DEVICE_WIDTH_RATIO,
        width: 245*DEVICE_WIDTH_RATIO,
    },
    titleV: {
        width: 218*DEVICE_WIDTH_RATIO,
        height: 20*DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 16*DEVICE_WIDTH_RATIO,
        marginLeft: 27*DEVICE_WIDTH_RATIO,
    },
    titleText: {
        fontSize: 16,
        color: '#444444',
    },
    titleWidth: {
        maxWidth: 80,
    },
    tipDetailText: {
        fontSize: 12,
        color: '#B0B0B0',
        marginTop: 12*DEVICE_WIDTH_RATIO,
        marginLeft: 27*DEVICE_WIDTH_RATIO,
    },

    shareView: {
        position: 'absolute',
        width,
        height: 171*DEVICE_WIDTH_RATIO,
        backgroundColor: 'rgb(241,241,241)',
        alignItems: 'center',
        bottom : 0,
    },
    image :{
        width: 305*DEVICE_WIDTH_RATIO,
        height: 88*DEVICE_WIDTH_RATIO,
        marginTop: 25*DEVICE_WIDTH_RATIO,
        backgroundColor: 'red',
    },
    buttons: {
        width,
        height: 115*DEVICE_WIDTH_RATIO,
        alignItems: 'center',
        flexDirection: 'row',
    },
    button1: {
        alignItems: 'center',
        marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
    },

    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,
        width: 90*DEVICE_WIDTH_RATIO,
        textAlign: 'center',
        color: '#444444',
    },
    line: {
        width: width - 52,
        height: 1,
        backgroundColor: '#CCCCCC',
    },
    save: {
        width,
        height: 54*DEVICE_WIDTH_RATIO,
        justifyContent: 'center',
        alignItems: 'center',
    },
    savetext: {
        fontSize: 17,
        color: '#444444',
    },

    cancelBtn: {
        position: 'absolute',
        width: 54*DEVICE_WIDTH_RATIO,
        height: 54*DEVICE_WIDTH_RATIO,
        top: 44,
        right: 34,
        alignItems: 'flex-end',
    },
    cancelBtnicon: {
        width: 30*DEVICE_WIDTH_RATIO,
        height: 30*DEVICE_WIDTH_RATIO,
    },
});