'use strict';

import React, {Component} from 'react';
import ReactNative, {Platform, StyleSheet, View, Dimensions, NativeAppEventEmitter} from 'react-native'

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import { setUnionType } from '../reducers/app/appActions';
import * as groupPurchaseDetailActions from '../reducers/groupPurchaseDetail/groupPurchaseDetailActions';
import GroupPurchaseDetail from '../components/GroupPurchaseDetail'
import ShareViewModal from '../components/ShareViewModal'
import SnapshootShare from '../components/SnapshootShare'
import {getSlicedUrl} from '../../classify/utils/Utils';

const actions = [
    groupPurchaseDetailActions,
    {setUnionType},
];


function mapStateToProps(state) {
    return {
        ...state
    };
}

function mapDispatchToProps(dispatch) {

    const creators = Map()
        .merge(...actions)
        .filter(value => typeof value === 'function')
        .toObject();

    return {
        actions: bindActionCreators(creators, dispatch),
        dispatch
    };
}

class GroupPurchaseDetailContainer extends Component {
    constructor(props) {
        super(props);
        this._onEndReached = this._onEndReached.bind(this);
        this._didTouchBanner = this._didTouchBanner.bind(this);
        this.updateTime = this.updateTime.bind(this);
        this.didTouchProduct = this.didTouchProduct.bind(this);
        this.goComment = this.goComment.bind(this);
        this.didTouchButton = this.didTouchButton.bind(this);
        this.showShareView = this.showShareView.bind(this);
        this.shareMiniApp = this.shareMiniApp.bind(this);
        this.showSnapshootShare = this.showSnapshootShare.bind(this);
        this.shareSnapshootAction = this.shareSnapshootAction.bind(this);

        this.subscription = NativeAppEventEmitter.addListener(
                    'ShareCollageDetailEvent',
                    () => {
                        this.props.actions.showShareView(true);
                    }
                );
    }

    async componentDidMount() {
      this.props.actions.getProductList();
      this.props.actions.fetchActivityGroupDetail();
      this.props.actions.fetchResourceInfo();
    }

    componentWillUnmount() {
      this.subscription && this.subscription.remove();
    }

    updateTime(leftTime) {
      if(leftTime <= 0){
        this.props.actions.fetchActivityGroupDetail();
        return;
      }
      this.props.actions.updateTime(leftTime);
    }
    didTouchButton(resource){
      let pageGo = resource.pageGo ? resource.pageGo : 0;
      let { activityId, groupNo, groupDetail } = this.props.groupPurchaseDetail;
      if(pageGo == 1) {
        this.props.actions.showShareView(true);
      }else if (pageGo == 2 || pageGo == 5) {
        let membershipItems = groupDetail.get('membershipItems');
        let productDetail = membershipItems.size > 0 ? membershipItems.get(0) : new Map();
        let productSkn = productDetail.get('productSkn');
        let productGroupPrice = productDetail.get('productGroupPrice');
        let productName = productDetail.get('productName');
        let params = {
          activityId,
          groupNo,
          productSkn,
          productGroupPrice,
          productName,
          fromPage: 'GroupPurchaseDetail'
        };
        ReactNative.NativeModules.YH_CommonHelper.showBuyPicker(params);
      }else if (pageGo == 3) {
        this.props.actions.showShareView(true);
      }else if (pageGo == 4 || pageGo == 7 || pageGo == 6) {
        let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.activitytemplate","params":{"type":"2", "activityId":"${activityId}"}}`;
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
      }
    }

    shareSnapshootAction(shareType,url) {
      let fromPage = 'GroupPurchaseDetail';
      let param = {
        shareType,
        imageUrl: url,
        fromPage,
      }

      ReactNative.NativeModules.YH_CommonHelper.shareImageToWXMini(param);
      this.props.actions.showSnapshootShare(false);
    }

    showShareView(show){
      this.props.actions.showShareView(show);
    }

    didTouchProduct(productSkn,activityId,newSrc) {
      if(newSrc){
        let arr=newSrc.split("?");
        newSrc = arr[0];
      }
      let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${productSkn}","activity_id":"${activityId}","product_icon":"${newSrc}","activity_type":"groupPurchase"}}`;
      ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }

    goComment() {
      let url = 'https://m.yohobuy.com/activity/feature/1555.html?nodownload=1&title=友货规则';
      ReactNative.NativeModules.YH_CommonHelper.goLinkUrl(url);
    }

    _didTouchBanner(url) {
        if (!url) {
            return;
        }
        let params = {
            URL: url,
        };
        ReactNative.NativeModules.YH_CommonHelper.logEvent('YB_GROUP_DEATIL_BANNER_C', params);
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }

    async shareMiniApp(){
      let {
          activityId,
          groupNo,
          groupDetail,
      } = this.props.groupPurchaseDetail;
      let { unionType } = this.props.app;
      let productDetail = groupDetail ? groupDetail.toJS():null;
      if(!productDetail){
        return;
      }
      let membershipItems = productDetail.membershipItems;
      let resource = membershipItems ? membershipItems[0]: null;
      let lackNum = productDetail ? productDetail.lackNum : 0;
      if (!resource) {
        return;
      }
      let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,150*DEVICE_WIDTH_RATIO, 120*DEVICE_WIDTH_RATIO, 2) : '';
      let miniProgramPath = '/pages/groupPurchase/groupPurchaseResult?activity_id=' + activityId + '&group_no=' + groupNo;
      unionType && (miniProgramPath += '&unionType=' + unionType);
      let productGroupPrice = resource.productGroupPrice;
      let productName = resource.productName;
      let title  = '【还差' + lackNum + '人】' + productGroupPrice + '拼' + productName;
      let fromPage = 'GroupPurchaseDetail';

      this.props.actions.showShareView(false);
      let businessId = 'collage';
      let param = {
        title: title,
        image: productIcon,
        shareUrl: '',
        miniProgramPath,
        fromPage,
        businessId
      }
      ReactNative.NativeModules.YH_CommonHelper.shareWXMiniProgram(param);
    }

    showSnapshootShare(show){
      this.props.actions.showShareView(false);
      this.props.actions.showSnapshootShare(show);
    }

    _onEndReached() {
        this.props.actions.getProductList();
    }

    render() {
        let {
            activityId,
            groupNo,
            showShareView,
            showSnapshootShare,
            groupDetail,
            productList,
            resourceInfo
        } = this.props.groupPurchaseDetail;

        let {
            host,
            unionType,
        } = this.props.app;

        let param = {
              activity_id: activityId,
              group_no: groupNo,
          }

        let qrCode = host + '/wechat/miniapp/img-check.jpg?param=' + encodeURIComponent(JSON.stringify(param)) + '&miniQrType=4';

        return (
            <View style={styles.container}>
              <ShareViewModal show={showShareView} unionType={unionType} showShareView={this.showShareView} shareMiniApp={this.shareMiniApp} showSnapshootShare={this.showSnapshootShare}/>
              <SnapshootShare
                show={showSnapshootShare}
                unionType={unionType}
                groupDetail={groupDetail}
                showSnapshootShare={this.showSnapshootShare}
                shareSnapshootAction={this.shareSnapshootAction}
                qrCode={qrCode}
              />
              <GroupPurchaseDetail
                activityId={activityId}
                productList={productList}
                groupDetail={groupDetail}
                resource={resourceInfo}
                onEndReached={this._onEndReached}
                updateTime={this.updateTime}
                didTouchButton={this.didTouchButton}
                didTouchProduct={this.didTouchProduct}
                goComment={this.goComment}
                didTouchBanner={this._didTouchBanner}
              />
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

export default connect(mapStateToProps, mapDispatchToProps)(GroupPurchaseDetailContainer);