import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

// ======================================================
// Containers
// ======================================================
import Layout from '../../Layout';
import { FooterAction } from '../../Utils';

// ======================================================
// Components
// ======================================================
import { MobileTopupTitle, ProductTitle, PromotionSetTitle, PaymentConfirmation, Loading, Thankyou } from '../../../components';

// ======================================================
// Actions
// ======================================================
import * as ApplicationActions from '../../../actions/applicationActions';
import * as Actions from './actions';

// ======================================================
// Selectors
// ======================================================
import RootSelector from '../../../selectors/root';
import MasterappSelector from '../../../selectors/masterapp';
import OrderSelector from '../../../selectors/order';

const mapStateToProps = state => {
  return {
    ...state.payment,
    canChangeCash: state.masterapp.canChangeCash,
    baseURL: MasterappSelector.getBaseURL(state.masterapp),
    summaryList: RootSelector.getPaymentSummaryList(state),
    paymentBgImage: OrderSelector.getPaymentBgImage(state.order),
    orderType: OrderSelector.getOrderType(state.order)
  };
};

const actions = {
  ...ApplicationActions,
  ...Actions,
};

const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);

class PaymentPage extends PureComponent {
  static propTypes = {
    baseURL: PropTypes.string.isRequired,
    summaryList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
    isFinish: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool.isRequired,
    returnAllInsertCash: PropTypes.func.isRequired,
    initPaymentPage: PropTypes.func.isRequired,
    canChangeCash: PropTypes.bool.isRequired,
    orderType: PropTypes.string,
    paymentBgImage: PropTypes.string,
  };

  componentDidMount = () => {
    const { initPaymentPage } = this.props;
    initPaymentPage();
  }

  componentWillUnmount = () => {
    const { returnAllInsertCash } = this.props;
    console.log('outPaymentPage !!!!');
    // if unmount return
    returnAllInsertCash();
  }

  renderContent = () => {
    const { baseURL, isLoading, isFinish, summaryList, canChangeCash } = this.props;
    // const isFinish = true;
    if (isFinish) return <Thankyou baseURL={baseURL} />;
    if (isLoading) return <Loading baseURL={baseURL} />;
    return (
      <PaymentConfirmation
        baseURL={baseURL}
        summaryList={summaryList}
        canChangeCash={canChangeCash}
      />
    );
  }

  renderTitle = () => {
    const { baseURL, orderType, paymentBgImage } = this.props;
    if (orderType === 'promotionSet') {
      return <PromotionSetTitle baseURL={baseURL} bgImage={paymentBgImage} />;
    }
    if (orderType === 'mobileTopup') {
      return <MobileTopupTitle baseURL={baseURL} bgImage={paymentBgImage} />;
    }
    return <ProductTitle baseURL={baseURL} bgImage={paymentBgImage} />;
  }

  render() {
    const { baseURL, isLoading, isFinish } = this.props;
    const canBack = !isLoading && !isFinish;
    return (
      <div>
        <Layout.Title>
          {
            this.renderTitle()
          }
        </Layout.Title>
        <Layout.Content>
          {
            this.renderContent()
          }
          {
            canBack &&
            <FooterAction />
          }
        </Layout.Content>
      </div>
    );
  }
}

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

@@ -1236,16 +1236,95 @@
 ayment,%0A
+    moneyBoxActive: MasterappSelector.verifyIsMoneyBoxActive(state.masterapp),%0A
     canC
@@ -2545,32 +2545,48 @@
 =%3E %7B%0A    const %7B
+ moneyBoxActive,
  baseURL, isLoad
@@ -2673,16 +2673,44 @@
 = true;%0A
+    if (moneyBoxActive) %7B%0A  
     if (
@@ -2754,24 +2754,26 @@
 aseURL%7D /%3E;%0A
+  
     if (isLo
@@ -2817,24 +2817,26 @@
 RL%7D /%3E;%0A    
+  
 return (%0A   
@@ -2838,16 +2838,18 @@
 (%0A      
+ 
+ 
 %3CPayment
@@ -2861,16 +2861,18 @@
 rmation%0A
+  
         
@@ -2893,24 +2893,26 @@
 RL%7D%0A        
+  
 summaryList=
@@ -2929,24 +2929,26 @@
 st%7D%0A        
+ 
+ 
 canChangeCas
@@ -2975,18 +2975,180 @@
     
+  
 /%3E%0A
+  
     );%0A
+    %7D%0A    if (isFinish) %7B%0A      return %3CThankyou baseURL=%7BbaseURL%7D /%3E;%0A    %7D%0A    return %3CLoading text=%7B'%E0%B8%A3%E0%B8%B0%E0%B8%9A%E0%B8%9A%E0%B8%81%E0%B8%B3%E0%B8%A5%E0%B8%B1%E0%B8%87%E0%B9%80%E0%B8%9B%E0%B8%B4%E0%B8%94%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B9%80%E0%B8%87%E0%B8%B4%E0%B8%99 %E0%B8%A3%E0%B8%AD%E0%B8%AA%E0%B8%B1%E0%B8%81%E0%B8%84%E0%B8%A3%E0%B8%B9%E0%B9%88'%7D baseURL=%7BbaseURL%7D /%3E%0A
   %7D%0A
@@ -3576,32 +3576,48 @@
 () %7B%0A    const %7B
+ moneyBoxActivel
  baseURL, isLoad
@@ -3919,24 +3919,42 @@
 %0A           
+ moneyBoxActive &&
  canBack &&%0A

resolve conflict