import React from 'react';
import { Button, Popover, Tabs, Flex, Card, Form, InputNumber, Switch, Radio } from 'antd';
import Styles from './web.pc.module.less';
import OfflineConfig from '../../offlineAccount/config';
const PayChannelConfigDict = {};
export function registerPayChannelComponent(entity, component) {
    PayChannelConfigDict[entity] = component;
}
function PayConfig(props) {
    const { payConfig, update, t } = props;
    const withdrawLoss = payConfig?.withdrawLoss;
    const depositLoss = payConfig?.depositLoss;
    const updateDepositLoss = (data) => {
        update && update({
            depositLoss: {
                ...depositLoss,
                ...data,
            },
            withdrawLoss: withdrawLoss || {
                conservative: false,
            },
        });
    };
    const updateWithdrawLoss = (data) => {
        update && update({
            depositLoss: depositLoss || {},
            withdrawLoss: {
                conservative: !!(withdrawLoss?.conservative),
                ...withdrawLoss,
                ...data,
            },
        });
    };
    return (<Flex gap="middle">
            <Card title={t('payConfig.label.depositLoss')} extra={<Popover content={t("payConfig.help.depositLoss")}>
                        <span className={Styles.help}>{t("help")}</span>
                    </Popover>}>
                <Form labelCol={{ span: 8 }} wrapperCol={{ span: 18 }} layout="horizontal" style={{ width: '100%' }}>
                    <Form.Item label={t('payConfig.label.ratio')}>
                        <InputNumber value={depositLoss?.ratio} max={20} min={0} addonAfter={"%"} step={0.01} precision={2} disabled={!update} onChange={(value) => {
            const ratio = value;
            updateDepositLoss({
                ratio: ratio || 0
            });
        }}/>
                    </Form.Item>
                    <Form.Item label={t('payConfig.label.highest')}>
                        <InputNumber value={depositLoss?.highest} min={0} step={1} disabled={!update} onChange={(value) => {
            const highest = value;
            updateDepositLoss({
                highest: highest || undefined
            });
            return;
        }}/>
                    </Form.Item>
                    <Form.Item label={t('payConfig.label.lowest')}>
                        <InputNumber value={depositLoss?.lowest} min={0} step={1} disabled={!update} onChange={(value) => {
            const lowest = value;
            updateDepositLoss({
                lowest: lowest || undefined
            });
            return;
        }}/>
                    </Form.Item>
                </Form>
            </Card>
            <Card title={t('payConfig.label.withdrawLoss')} extra={<Popover content={t('payConfig.help.withdrawLoss')}>
                        <span className={Styles.help}>{t("help")}</span>
                    </Popover>}>
                <Form labelCol={{ span: 8 }} wrapperCol={{ span: 18 }} layout="horizontal" style={{ width: '100%' }}>
                    <Form.Item label={t('payConfig.label.conservative')}>
                        <Switch disabled={!update} value={withdrawLoss?.conservative} onChange={(conservative) => {
            updateWithdrawLoss({ conservative });
        }}/>
                    </Form.Item>
                    <Form.Item label={t('payConfig.label.ratio')}>
                        <InputNumber disabled={!!withdrawLoss?.conservative || !update} value={withdrawLoss?.ratio} max={20} min={0.01} addonAfter={"%"} step={0.01} precision={2} onChange={(value) => {
            const ratio = value;
            updateWithdrawLoss({
                ratio: ratio || 0
            });
        }}/>
                    </Form.Item>
                    <Form.Item label={t('payConfig.label.highest')}>
                        <InputNumber disabled={!!withdrawLoss?.conservative || !update} value={withdrawLoss?.highest} min={0} step={1} onChange={(value) => {
            const highest = value;
            updateWithdrawLoss({
                highest: highest || undefined
            });
            return;
        }}/>
                    </Form.Item>
                    <Form.Item label={t('payConfig.label.lowest')}>
                        <InputNumber disabled={!!withdrawLoss?.conservative || !update} value={withdrawLoss?.lowest} min={0} step={1} onChange={(value) => {
            const lowest = value;
            updateWithdrawLoss({
                lowest: lowest || undefined
            });
            return;
        }}/>
                    </Form.Item>
                    <Form.Item label={t('payConfig.label.trim')}>
                        <Radio.Group disabled={!!withdrawLoss?.conservative || !update} options={[
            {
                label: t('payConfig.label.jiao'),
                value: 'jiao',
            },
            {
                label: t('payConfig.label.yuan'),
                value: 'yuan',
            },
            {
                label: t('payConfig.label.null'),
                value: '',
            }
        ]} value={withdrawLoss?.trim} onChange={({ target }) => updateWithdrawLoss({
            trim: target.value,
        })}/>
                    </Form.Item>
                </Form>
            </Card>
        </Flex>);
}
export default function render(props) {
    const { system, oakFullpath, operation, oakDirty, serverUrl, oakExecutable, canUpdate } = props.data;
    const { t, update, clean, execute } = props.methods;
    if (system && oakFullpath) {
        return (<div className={Styles.container}>
                <Tabs className={Styles.tabs} tabPosition="left" items={[
                {
                    label: (<div className={Styles.systemLabel}>
                                    {t('system')}
                                </div>),
                    key: 'system',
                    children: (<Flex vertical>
                                    <PayConfig payConfig={system.payConfig} update={canUpdate ? (payConfig) => update({ payConfig }) : undefined} t={t}/>
                                    <Flex gap="middle" justify='end'>
                                        <Button type="primary" disabled={oakExecutable !== true} onClick={() => execute()}>
                                            {t('common::confirm')}
                                        </Button>
                                        <Button disabled={!oakDirty} onClick={() => clean()}>
                                            {t('common::reset')}
                                        </Button>
                                    </Flex>
                                </Flex>),
                },
                {
                    label: (<div className={Styles.systemLabel}>
                                    {t('offlineAccount:name')}
                                </div>),
                    key: 'offlineAccount',
                    children: (<OfflineConfig oakPath={`${oakFullpath}.offlineAccount$system`} systemId={system.id}/>),
                },
                ...Object.keys(PayChannelConfigDict).map((ele) => {
                    const C = PayChannelConfigDict[ele];
                    return {
                        // @oak-ignore
                        label: (<div className={Styles.systemLabel}>
                                            {t(`${ele}:name`)}
                                        </div>),
                        key: ele,
                        children: <C oakPath={`${oakFullpath}.${ele}$system`} systemId={system.id}/>
                    };
                })
            ]}/>
            </div>);
    }
    return null;
}