import React, { Component, Fragment } from 'react';
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
// import { Link } from 'react-router-dom';
import AppLayout from '@/layouts/AppLayout';
import { WhiteSpace, WingBlank, Button, Toast } from 'antd-mobile';
import * as Icons from '@/components/Icons';
import TopDestinations from '@/components/TopDestinations';
import Pay from '@/utils/wxpay';

@inject("store")
@observer
export class Thanks extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store;
        this.bookStore = this.store.bookStore;
        this.userStore = this.store.userStore;
    }
    componentDidMount() {
        const script = document.createElement("script");
        script.src = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js";
        script.async = true;
        document.body.appendChild(script);
    }

    onClickOtherPay = (url) => {
        window.location.assign(url);
    }
    onClickGoOrders = () => {
        this.store.pushHistory("/account");
    }
    onClickWxpay = (coli_sn) => {
        Toast.loading('', 0);
        Pay.done(coli_sn, 'JSAPI', isTrue => {
            if (isTrue !== false) {
                Toast.success('Success!', 1);
                this.bookStore.updatePaid();
                this.userStore.paidCallback(isTrue);
            } else {
                Toast.offline('Something wrong, We\'ll contact you later.', 2);
            }
        });
    }

    render() {
        const bookReturn = this.bookStore.bookReturn;
        const navTitle = bookReturn.coli_sn === undefined ? 'Trippest' : 'Pay Now';
        const userinfo = toJS(this.store.userinfo);
        const PendingPayment = () => (
            <p style={{ padding: '15px 15px 21px 15px', fontSize: '21px', textAlign: 'center', borderBottom: '1PX solid #ddd' }}>
                {`Total: USD ${bookReturn.total_price}`}
            </p>
        )
        return (
            <AppLayout navTitle={navTitle}>
                <WingBlank style={{backgroundColor: '#fff' }}>
                    {bookReturn.coli_sn === undefined && <TopDestinations />}
                    {userinfo.openid !== null && bookReturn.payment_now === 'true' && bookReturn.paid !== 'true' &&
                        <Fragment>
                            <PendingPayment />
                            {
                                bookReturn.show_wxpay === 'true' &&
                                <Fragment>
                                    <Button className="holly-btn_paywx" onClick={e => this.onClickWxpay(bookReturn.coli_sn)}>Pay Now by WeChat Pay</Button>
                                    <WhiteSpace />
                                    <Button type="ghost"
                                        onClick={this.onClickGoOrders}
                                    >Go My Bookings &raquo;</Button>
                                    {/* <div className="holly-pay-btn"
                                        onClick={e => this.onClickOtherPay(bookReturn.payment_link)}
                                    >
                                        <p>
                                            Other payment methods&nbsp;&raquo;
                                        </p>
                                        <div>
                                            <span>{Icons.PAYPAL_LG}</span>&nbsp;
                                    <span>{Icons.CARD_LG}</span>&nbsp;
                                    <span>{Icons.ALIPAY_LG}</span>&nbsp;
                                </div>
                                    </div> */}
                                </Fragment>
                            }
                            {
                                bookReturn.show_wxpay !== 'true' &&
                                <Fragment>
                                    {/* #cb292d */}
                                    <Button type='primary' onClick={e => this.onClickOtherPay(bookReturn.payment_link)}>Pay Now&nbsp;&raquo;</Button>
                                    <WhiteSpace />
                                    <div className="holly-pay-btn"
                                        onClick={e => this.onClickOtherPay(bookReturn.payment_link)}
                                    >
                                        <span>{Icons.PAYPAL_LG}</span>&nbsp;
                                        <span>{Icons.CARD_LG}</span>&nbsp;
                                        <span>{Icons.ALIPAY_LG}</span>&nbsp;
                                    </div>
                                    <WhiteSpace size="lg" />
                                    <Button type="ghost"
                                        onClick={this.onClickGoOrders}
                                    >Go My Bookings &raquo;</Button>
                                    {/* <TopDestinations /> */}
                                </Fragment>
                            }
                        </Fragment>
                    }
                    {userinfo.openid !== null &&
                        bookReturn.paid === 'true' &&
                        <Fragment>
                            <PendingPayment />
                            <Button type="ghost"
                                onClick={this.onClickGoOrders}
                            >Go My Bookings &raquo;</Button>
                        </Fragment>
                    }
                    {userinfo.openid === null && userinfo.isWechat === true && bookReturn.total_price>0 &&
                        <Fragment>
                            <WhiteSpace />
                            <PendingPayment />
                            <p style={{ padding: '0 15px', marginTop: '15px', fontSize: '21px' }}>To pay and get update booking notice, long press QR code to follow.</p>
                            <div
                                style={{ textAlign: 'center' }}
                            >
                            <img
                                key="orderqrcode"
                                src={bookReturn.order_qrcode}
                                alt="orderqrcode"
                                style={{ width: '70%', verticalAlign: 'top', borderRadius: '5px 5px 0 0' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            /></div>
                        </Fragment>
                    }
                    {userinfo.openid === null && userinfo.isWechat !== true && bookReturn.total_price>0 &&
                        <Fragment>
                            <WhiteSpace />
                            <PendingPayment />
                            <Button type='primary' onClick={e => this.onClickOtherPay(bookReturn.payment_link)}>Pay Now&nbsp;&raquo;</Button>
                            <WhiteSpace />
                            <div className="holly-pay-btn"
                                onClick={e => this.onClickOtherPay(bookReturn.payment_link)}
                            >
                                <span>{Icons.PAYPAL_LG}</span>&nbsp;
                                <span>{Icons.CARD_LG}</span>&nbsp;
                                <span>{Icons.ALIPAY_LG}</span>&nbsp;
                            </div>
                        </Fragment>
                    }
                </WingBlank>
            </AppLayout>
        )
    }
}
export default Thanks
