'use strict';

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

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as groupPurchaseActions from '../reducers/groupPurchase/groupPurchaseActions';
import GroupPurchase from '../components/GroupPurchase';
import ShareViewModal from '../components/ShareViewModal';
import ListSnapshootShare from '../components/ListSnapshootShare';
import {getSlicedUrl} from '../../classify/utils/Utils';
import Helper from '../utils/Helper';


const actions = [
    groupPurchaseActions,
];

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

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 GroupPurchaseContainer extends Component {
    constructor(props) {
        super(props);
        this._onEndReached = this._onEndReached.bind(this);
        this._didTouchBanner = this._didTouchBanner.bind(this);
        this._didTouchProduct = this._didTouchProduct.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.jumpToMinePurchaseOrder = this.jumpToMinePurchaseOrder.bind(this);

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


    }

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

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

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

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

        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }

    _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}","product_icon":"${newSrc}","activity_id":"${activityId}","activity_type":"groupPurchase"}}`;
      ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }

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

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

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

    async shareMiniApp(){
        let {
            activityId,
            resource,
            shareCodeInfo,
            groupListParams,
        } = this.props.groupPurchase;
        if (!resource) {
          return;
        }

        let miniProgramPath;
        if (activityId == null) {
          miniProgramPath = '/pages/group/list?';
        } else {
           miniProgramPath = '/pages/group/list?activityId=' + activityId;
        }
        miniProgramPath = Helper.joinWxProgramPath(miniProgramPath, groupListParams)
        
        let fromPage = 'GroupPurchase';
        let bigImage = shareCodeInfo.get('bigImage');
        let productIcon = bigImage ? getSlicedUrl(bigImage,150*DEVICE_WIDTH_RATIO, 120*DEVICE_WIDTH_RATIO, 2) : '';
        this.props.actions.showShareView(false);
        let businessId = 'collage';
        let param = {
          title: shareCodeInfo.get('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);
    }

    jumpToMinePurchaseOrder() {
        let url = 'http://m.yohobuy.com?openby:yohobuy={"action":"go.mineGroupPurchase"}';
        ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
    }

    render() {
        let {
            activityId,
            showShareView,
            showSnapshootShare,
            productList,
            resource,
            shareCodeInfo,
            groupListParams,
        } = this.props.groupPurchase;

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

        let groupParams = Helper.excludeParams(groupListParams, false)
        let param = {
            ...groupParams,
            activityId,
        }

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

        return (
            <View style={styles.container}>
              <ShareViewModal show={showShareView} unionType={unionType} showShareView={this.showShareView} shareMiniApp={this.shareMiniApp} showSnapshootShare={this.showSnapshootShare}/>
              <ListSnapshootShare
                show={showSnapshootShare}
                unionType={unionType}
                shareCodeInfo={shareCodeInfo}
                showSnapshootShare={this.showSnapshootShare}
                shareSnapshootAction={this.shareSnapshootAction}
                qrCode={qrCode}
              />
              <GroupPurchase
                jumpToMinePurchaseOrder={this.jumpToMinePurchaseOrder}
                productList={productList}
                resource={resource}
                onEndReached={this._onEndReached}
                didTouchBanner={this._didTouchBanner}
                didTouchProduct={this._didTouchProduct}
              />
            </View>

        );
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

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