'use strict';

import React from 'react';
import ReactNative from 'react-native';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';
import DeleteLineText from '../../common/components/DeleteLineText';

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(index){
      ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
        (uri) => {
          this.props.shareSnapshootAction && this.props.shareSnapshootAction(index,uri);
        }).catch(
        (error) => {
          Alert.alert('图片生成失败!')
        });
    }

    saveImage(){
      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('保存失败!')
        });
    }

    render() {
      let { groupDetail ,qrCode} = 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,109*DEVICE_WIDTH_RATIO, 141*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}
                    >
                      <View style={styles.container} ref='container'>
                        <View style={styles.titleV}>
                          <Text style={styles.name}>{nickName}</Text>
                          <Text style={styles.commonText}>邀请你参团</Text>
                        </View>
                        <View style={styles.product}>
                          <YH_Image style={styles.productimage} url={productIcon}></YH_Image>
                          <View style={styles.right}>
                            <View style={styles.titleView}>
                              <Text style={styles.title} numberOfLines={2}>{productName}</Text>
                            </View>
                            <View style={styles.priceView}>
                              <View style={styles.iconTextView}>
                                <Text style={styles.iconText}>{perpleNum}人团</Text>
                              </View>
                              <Text style={styles.price1}>{productGroupPrice}</Text>
                            </View>
                            <View style={styles.subPriceView}>
                              <Text style={styles.subPrice1}>单人购买：</Text>
                              <DeleteLineText
                                  style={styles.oldPriceContainer}
                                  textStyle={styles.price2}
                                  lineStyle={styles.deleteLine}
                                  text={productSalePrice}
                              />
                            </View>
                          </View>
                        </View>
                        <Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />
                        <Image source={{uri: qrCode}} resizeMode={'contain'} style={styles.qr} />
                        <Text style={styles.tip}>长按扫码立即参团</Text>
                        <View style={styles.tipDetailView}>
                          <Image source={require('../images/PT_tip_ic.png')} resizeMode={'contain'} style={styles.tipicon} />
                          <Text style={styles.tipDetailText}>实际价格以页面展示为准</Text>
                        </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(0);
                      }}>
                          <Image source={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(1);
                      }}>
                        <Image source={require('../images/pengyou.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/pengyou.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: {
        width: width,
        height: height,
    },
    backContainer: {
      flex: 1,
      width: width,
      height: height,
      alignItems: 'center',
      backgroundColor: 'white',
    },

    container: {
      width,
      height,
      backgroundColor: 'white',
      alignItems: 'center',
    },
    titleV: {
      width: 300*DEVICE_WIDTH_RATIO,
      height: 22*DEVICE_WIDTH_RATIO,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 60*DEVICE_WIDTH_RATIO,
    },
    name: {
      fontSize: 16,
      color: '#D0021B',
    },
    commonText: {
      fontSize: 16,
      color: '#000000',
    },
    product: {
        width: 300*DEVICE_WIDTH_RATIO,
        height: 141*DEVICE_WIDTH_RATIO,
        shadowColor: 'rgba(0,0,0,0.4)',
        shadowOffset: {width: 0, height: 5},
        shadowOpacity: 0.5,
        shadowRadius: 5,
        elevation: 4,
        flexDirection: 'row',
        backgroundColor: 'white',
        marginTop: 34*DEVICE_WIDTH_RATIO,
    },
    productimage: {
      width: 109*DEVICE_WIDTH_RATIO,
      height: 141*DEVICE_WIDTH_RATIO,
    },
    right: {
      width: 191*DEVICE_WIDTH_RATIO,
      height: 141*DEVICE_WIDTH_RATIO,
      flexDirection: 'column',
    },
    titleView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 32*DEVICE_WIDTH_RATIO,
      marginTop: 17*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
    },
    scrollView: {
      backgroundColor: 'white',
    },
    spaceV: {
      backgroundColor: 'white',
      height: 171*DEVICE_WIDTH_RATIO,
      width,
    },

    title: {
      fontSize: 12,
      color: '#444444',
      lineHeight: 19,
    },
    subPriceView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 14*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginTop: 5*DEVICE_WIDTH_RATIO,
      flexDirection: 'row',
      alignItems: 'center',
    },
    subPrice1: {
      fontSize: 10,
      color: '#B0B0B0',
      lineHeight: 10*DEVICE_WIDTH_RATIO,
    },
    priceView: {
      width: 174*DEVICE_WIDTH_RATIO,
      height: 21*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginTop: 33*DEVICE_WIDTH_RATIO,
      flexDirection: 'row',
      alignItems: 'center',
    },
    iconTextView: {
      width: 40*DEVICE_WIDTH_RATIO,
      height: 14*DEVICE_WIDTH_RATIO,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#D0021B',
    },
    iconText: {
      color: 'white',
      fontSize: 9,
      textAlign: 'center',
    },
    price1: {
      fontSize: 18,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      color: '#444444',
      lineHeight: 18*DEVICE_WIDTH_RATIO,
      fontWeight: 'bold',
    },

    oldPriceContainer: {
        flexDirection: 'row',
        height: 12,
        marginTop: 2,
    },

    price2: {
      fontSize: 12,
      lineHeight: 12,
      color: '#B0B0B0',
      alignItems: 'center',
    },
    deleteLine: {
        position: 'absolute',
        top: (16 / 2) - 4,
        left: 0,
        right: 0,
        height: 1,
        backgroundColor: '#b0b0b0',
    },
    logo: {
      height: 19*DEVICE_WIDTH_RATIO,
      width: 300*DEVICE_WIDTH_RATIO,
      marginTop: 80*DEVICE_WIDTH_RATIO,
    },
    qr: {
      height: 120*DEVICE_WIDTH_RATIO,
      width: 120*DEVICE_WIDTH_RATIO,
      marginTop: 25*DEVICE_WIDTH_RATIO,
    },
    tip: {
      fontSize: 14,
      color:'#444444',
      marginTop: 16*DEVICE_WIDTH_RATIO,
    },
    tipDetailView: {
      flexDirection: 'row',
    },
    tipicon: {
      marginTop: 10*DEVICE_WIDTH_RATIO,
      height: 15*DEVICE_WIDTH_RATIO,
      width: 15*DEVICE_WIDTH_RATIO,
    },
    tipDetailText: {
      fontSize: 12,
      color: '#B0B0B0',
      marginTop: 10*DEVICE_WIDTH_RATIO,
      marginLeft: 5*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: {
    marginLeft: 90*DEVICE_WIDTH_RATIO,
    alignItems: 'center',
   },

  button2: {
   marginLeft: 105*DEVICE_WIDTH_RATIO,
   alignItems: 'center',
  },
   icon: {
     width: 45*DEVICE_WIDTH_RATIO,
     height: 45*DEVICE_WIDTH_RATIO,
   },
   text: {
     marginTop: 8*DEVICE_WIDTH_RATIO,
     fontSize: 12,
     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: 34*DEVICE_WIDTH_RATIO,
      height: 34*DEVICE_WIDTH_RATIO,
    },
});