import React from 'react';
import { Button, Popup } from 'antd-mobile';
import Styles from './web.mobile.module.less';
import classNames from 'classnames';
import { CentToString } from 'oak-domain/lib/utils/money';
import AccountDeposit from '../deposit';
export default function Render(props) {
    const { account, depositMax, unfinishedPayId, onDepositPayId, depositOpen, ufOpen, depPrice, depositChannel, depositMeta, depositing } = props.data;
    const { t, createDepositPay, setMessage, setDepositOpen, setUfOpen, setDepPrice, setDepositChannel, setDepositMeta, setDepositing } = props.methods;
    if (account) {
        const { total, avail, '#oakLegalActions': legalActions, accountOper$account: opers } = account;
        return (<div className={Styles.container}>
                <div className={Styles.info}>
                    <div className={classNames(Styles.grid, Styles.fortify)}>
                        <span className={Styles.label}>{t('avail')}：</span>
                        <span className={Styles.value}>{t('common::pay.symbol')} {CentToString(avail, 2)}</span>
                    </div>
                    <div className={Styles.grid}>
                        <span className={Styles.label}>{t('total')}：</span>
                        <span className={Styles.value}>{t('common::pay.symbol')} {CentToString(total, 2)}</span>
                    </div>
                </div>
                <div style={{ flex: 1 }}/>
                <div className={Styles.btn}>
                    {legalActions?.includes('deposit') && <div className={Styles.item}>
                        <Button block color="primary" disabled={ufOpen || depositOpen} onClick={() => {
                    if (unfinishedPayId) {
                        setUfOpen(true);
                    }
                    else {
                        setDepositOpen(true);
                    }
                }}>
                            {t('account:action.deposit')}
                        </Button>
                    </div>}
                    {legalActions?.includes('withdraw') && <div className={Styles.item}>
                        <Button block onClick={() => setMessage({
                    type: 'warning',
                    content: '尚未实现'
                })}>
                            {t('account:action.withdraw')}
                        </Button>
                    </div>}
                </div>
                <Popup visible={depositOpen} onMaskClick={() => {
                setDepositOpen(false);
                setDepPrice(null);
                setDepositChannel(undefined);
                setDepositMeta(undefined);
            }} onClose={() => {
                setDepositOpen(false);
                setDepPrice(null);
                setDepositChannel(undefined);
                setDepositMeta(undefined);
            }}>
                    <div style={{ padding: 12, marginBottom: 6 }}>
                        <AccountDeposit depositMax={depositMax} price={depPrice} channel={depositChannel} meta={depositMeta} onSetPrice={(price) => setDepPrice(price)} onSetChannel={(channel) => setDepositChannel(channel)} onSetMeta={(meta) => setDepositMeta(meta)}/>
                        <Button block loading={depositing} color="primary" disabled={!depPrice || !depositChannel || depositing} onClick={async () => {
                setDepositing(true);
                const payId = await createDepositPay(depPrice, depositChannel, depositMeta || {});
                setDepPrice(null);
                setDepositChannel(undefined);
                setDepositMeta(undefined);
                setDepositing(false);
                onDepositPayId(payId);
            }}>
                            {depositing ? t('depositing') : t('common::confirm')}
                        </Button>
                    </div>
                </Popup>
            </div>);
    }
    return null;
}