import React from 'react';
import { ToYuan, ToCent } from 'oak-domain/lib/utils/money';
import Styles from './web.pc.module.less';
import PayChannelPicker from '../../pay/channelPicker2';
import { Divider, Checkbox, InputNumber, Flex, Result } from 'antd';
import Info from './info';
function RenderPayChannel(props) {
    const { price, payChannels, t, channel, meta, onPick, } = props;
    return (<div className={Styles.pc1}>
            <div className={Styles.content}>
                <div>
                    {t('choose', { price: ToYuan(price) })}
                </div>
                <Divider />
                <PayChannelPicker payChannels={payChannels} payChannel={channel} onPick={onPick}/>
            </div>
        </div>);
}
function RenderAccountPay(props) {
    const { max, t, accountPrice, setAccountPrice, useAccount, switchUseAccount, accountAvail, accountTips } = props;
    return (<div className={Styles.pc1}>
            <div className={Styles.content}>
                <Checkbox checked={useAccount} onChange={() => switchUseAccount()}>
                    {t('useAccount')}
                </Checkbox>
                {useAccount && (<>
                            <Divider />
                            <Flex align='baseline' vertical>
                                <InputNumber max={ToYuan(max)} addonAfter="￥" value={typeof accountPrice === 'number' ? ToYuan(accountPrice) : null} onChange={(v) => {
                if (typeof v === 'number') {
                    setAccountPrice(Math.floor(ToCent(v)));
                }
            }}/>
                                <div className={Styles.tips}>{accountTips || t('accountMax', { max: ToYuan(accountAvail) })}</div>
                            </Flex>
                        </>)}
            </div>
        </div>);
}
export default function Render(props) {
    const { accountId, accountAvailMax, legal, accountPrice, useAccount, order, activePay, payChannels, channel, meta, rest, accountTips } = props.data;
    const { t, setAccountPrice, onPickChannel, onSetChannelMeta, switchUseAccount } = props.methods;
    if (order) {
        if (activePay) {
            return (<Result status="warning" title={t('paying')}/>);
        }
        if (!legal) {
            return (<Result status="warning" title={t('illegalState', { state: t(`order:v.iState.${order.iState}`) })}/>);
        }
        return (<div className={Styles.container}>
                <Info t={t} price={ToYuan(order.price)}/>
                {(accountId && accountAvailMax) ? <div className={Styles.ctrl}>
                        <RenderAccountPay max={Math.min(accountAvailMax, rest + accountPrice)} t={t} setAccountPrice={setAccountPrice} useAccount={useAccount} switchUseAccount={switchUseAccount} accountPrice={accountPrice} accountAvail={accountAvailMax} accountTips={accountTips}/>
                    </div> : null}
                {!!(rest && rest > 0) && <div className={Styles.ctrl}>
                    <RenderPayChannel price={rest} t={t} payChannels={payChannels} channel={channel} meta={meta} onPick={onPickChannel}/>
                </div>}
            </div>);
    }
    return null;
}