'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,
} = ReactNative;


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

    saveImage(){
      this.props.showSnapshootShare && this.props.showSnapshootShare(2,false);
    }

    render() {
      let { groupDetail } = 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;

        return (
            <Modal
                visible={this.props.show}
                animationType={'none'}
                transparent={true}
                onRequestClose={() => {
                }}>
                <View style={styles.modalContainer}>
                  <View style={styles.container}>
                    <View style={styles.titleV}>
                      <Text style={styles.name}>54666</Text>
                      <Text style={styles.commonText}>邀请你参团</Text>
                    </View>
                    <View style={styles.product}>
                      <YH_Image style={styles.image} 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}>
                          <Text style={styles.iconText}>{perpleNum}人团</Text>
                          <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={require('../images/pengyou.png')} 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>
                  <TouchableOpacity activeOpacity={1} style={styles.saveButton} onPress={() => {
                    this.saveImage();
                  }}>
                    <Text style={styles.saveButtonText}>保存图片分享到朋友圈</Text>
                  </TouchableOpacity>

                </View>
            </Modal>
        );
    }
};

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

let styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        width: width,
        height: height,
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
    },

    saveButton: {
      width: 300*DEVICE_WIDTH_RATIO,
      height: 44*DEVICE_WIDTH_RATIO,
      backgroundColor: 'white',
      alignItems: 'center',
      marginTop: 10*DEVICE_WIDTH_RATIO,
      borderRadius: 4,
      justifyContent: 'center',
    },
    saveButtonText: {
      fontSize: 16*DEVICE_WIDTH_RATIO,
      color: '#444444',
    },
    container: {
      width: 300*DEVICE_WIDTH_RATIO,
      height: 482*DEVICE_WIDTH_RATIO,
      backgroundColor: 'white',
      alignItems: 'center',
      marginTop: 60*DEVICE_WIDTH_RATIO,
    },
    titleV: {
      width: 300*DEVICE_WIDTH_RATIO,
      height: 22*DEVICE_WIDTH_RATIO*sc,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 34*DEVICE_WIDTH_RATIO*sc,
    },
    name: {
      fontSize: 16*sc,
      color: '#D0021B',
    },
    commonText: {
      fontSize: 16*sc,
      color: '#000000',
    },
    product: {
        width: 300*DEVICE_WIDTH_RATIO*sc,
        height: 141*DEVICE_WIDTH_RATIO*sc,
        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*sc,
    },
    image: {
      width: 109*DEVICE_WIDTH_RATIO*sc,
      height: 141*DEVICE_WIDTH_RATIO*sc,
    },
    right: {
      width: 191*DEVICE_WIDTH_RATIO*sc,
      height: 141*DEVICE_WIDTH_RATIO*sc,
      flexDirection: 'column',
    },
    titleView: {
      width: 174*DEVICE_WIDTH_RATIO*sc,
      height: 32*DEVICE_WIDTH_RATIO*sc,
      marginTop: 17*DEVICE_WIDTH_RATIO*sc,
      marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
    },

    title: {
      fontSize: 12*sc,
      color: '#444444',
      lineHeight: 19*sc,
    },
    subPriceView: {
      width: 174*DEVICE_WIDTH_RATIO*sc,
      height: 14*DEVICE_WIDTH_RATIO*sc,
      marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
      marginTop: 5*DEVICE_WIDTH_RATIO*sc,
      flexDirection: 'row',
      alignItems: 'center',
    },
    subPrice1: {
      fontSize: 10*sc,
      color: '#B0B0B0',
      lineHeight: 10*DEVICE_WIDTH_RATIO*sc,
    },
    priceView: {
      width: 174*DEVICE_WIDTH_RATIO*sc,
      height: 21*DEVICE_WIDTH_RATIO*sc,
      marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
      marginTop: 33*DEVICE_WIDTH_RATIO*sc,
      flexDirection: 'row',
      alignItems: 'center',
    },

    iconText: {
      width: 40*DEVICE_WIDTH_RATIO*sc,
      height: 14*DEVICE_WIDTH_RATIO*sc,
      backgroundColor: '#D0021B',
      color: 'white',
      fontSize: 9*sc,
      textAlign: 'center',
      lineHeight: 14*DEVICE_WIDTH_RATIO*sc,
    },

    price1: {
      fontSize: 18*sc,
      marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
      color: '#444444',
      lineHeight: 18*DEVICE_WIDTH_RATIO*sc,
      fontWeight: 'bold',
    },

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

    price2: {
      fontSize: 12*sc,
      lineHeight: 12*sc,
      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*sc,
      width: 300*DEVICE_WIDTH_RATIO,
      marginTop: 80*DEVICE_WIDTH_RATIO*sc,
    },
    qr: {
      height: 120*DEVICE_WIDTH_RATIO*sc,
      width: 120*DEVICE_WIDTH_RATIO*sc,
      marginTop: 25*DEVICE_WIDTH_RATIO*sc,
    },
    tip: {
      fontSize: 14*sc,
      color:'#444444',
      marginTop: 16*DEVICE_WIDTH_RATIO*sc,
    },
    tipDetailView: {
      flexDirection: 'row',
    },
    tipicon: {
      marginTop: 10*DEVICE_WIDTH_RATIO*sc,
      height: 15*DEVICE_WIDTH_RATIO*sc,
      width: 15*DEVICE_WIDTH_RATIO*sc,
    },
    tipDetailText: {
      fontSize: 12,
      color: '#B0B0B0',
      marginTop: 10*DEVICE_WIDTH_RATIO*sc,
      marginLeft: 5*DEVICE_WIDTH_RATIO*sc,
    },
});