import React from 'react';
import { Button, Modal, Card, Flex, Divider, Typography } from 'antd';
import Styles from './web.pc.module.less';
import { CentToString } from 'oak-domain/lib/utils/money';
import classNames from 'classnames';
import NewDeposit from '../../deposit/new';
import AccountOperList from '../../accountOper/pure/List.pc';
import { AccountBookOutlined, ScheduleOutlined } from '@ant-design/icons';
export default function Render(props) {
    const { account, depositMaxCent, newDepositPath, depositOpen, depositMinCent, ufOpen, depPrice, depositChannel, depositLoss, depositing, onWithdraw, onGoToHistory, } = props.data;
    const { t, newDeposit, setMessage, setDepositOpen, setUfOpen, setDepPrice, setDepositChannel, onUnfinishedDepositClick, setDepositing, onDepositClick, onDepositModalClose, } = props.methods;
    if (account) {
        const { total, avail, '#oakLegalActions': legalActions, accountOper$account: opers } = account;
        return (<>
                <Card className={Styles.card} title={<span><AccountBookOutlined />&nbsp;{t('title')}</span>} extra={<Flex gap="middle">
                            {legalActions?.includes('deposit') && <Button type="primary" disabled={ufOpen || !!depositOpen} onClick={() => onDepositClick()}>
                                {t('account:action.deposit')}
                            </Button>}
                            {legalActions?.includes('withdraw') && <Button onClick={() => onWithdraw()}>
                                {t('account:action.withdraw')}
                            </Button>}
                        </Flex>}>
                    <div className={Styles.content}>
                        <Flex gap="middle" justify='space-around'>
                            <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 className={Styles.grid}>
                                <span className={Styles.label}>{t('loan')}</span>
                                <span className={Styles.value}>{t('common::pay.symbol')} {CentToString(total - avail, 2)}</span>
                            </div>
                        </Flex>
                        {!!opers?.length && (<>
                                    <Divider />
                                    <div className={Styles.oper}>
                                        <span className={Styles.title}><ScheduleOutlined />&nbsp;{t('history')}：</span>
                                        <AccountOperList accountOpers={opers} t={t}/>
                                    </div>
                                </>)}
                    </div>
                </Card>
                <Modal title={t('deposit.title')} open={depositOpen} onCancel={() => onDepositModalClose()} destroyOnClose={true} footer={<Button loading={depositing} type="primary" disabled={!depPrice || !depositChannel || depositing} onClick={() => newDeposit()}>
                            {depositing ? t('depositing') : t('common::confirm')}
                        </Button>}>
                    <div style={{ padding: 12 }}>
                        <NewDeposit depositMinCent={depositMinCent} depositMaxCent={depositMaxCent} oakPath={newDepositPath} price={depPrice} channel={depositChannel} loss={depositLoss} onSetChannel={setDepositChannel} onSetPrice={setDepPrice}/>
                    </div>
                </Modal>
                <Modal title={t('uf.title')} open={ufOpen} onCancel={() => {
                setUfOpen(false);
            }} destroyOnClose={true} footer={null}>
                    <div className={Styles.uf}>
                        <Typography.Paragraph>{t('uf.content')}</Typography.Paragraph>
                        <Button type="link" onClick={() => onUnfinishedDepositClick()}>
                            {t('uf.go')}
                        </Button>
                    </div>
                </Modal>
            </>);
    }
    return null;
}