import React from 'react';
import { Form, Switch, InputNumber, Input, Select, Radio } from 'antd';
export default function render(props) {
    const { apProduct, applications, oakFullpath, systemId } = props.data;
    const { t, update } = props.methods;
    if (apProduct) {
        return (<Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ minWidth: 560 }}>
                <Form.Item label={t('apProduct:attr.type')}>
                    <Select value={apProduct.type} options={['native', 'mp', 'jsapi', 'h5', 'app', 'person', 'code'].map(ele => ({
                // @oak-ignore
                label: t(`apProduct:v.type.${ele}`),
                value: ele,
            }))} onSelect={(type) => {
                if (type === 'mp') {
                    update({ type, needReceiving: true });
                }
                else {
                    update({ type, needReceiving: false });
                }
            }}/>
                </Form.Item>
                {apProduct.type && applications && (<Form.Item label={t('apProduct:attr.application')}>
                        <Select value={apProduct.applicationId} options={applications.map(ele => ({
                    label: ele.name,
                    value: ele.id,
                }))} onSelect={(value) => update({ applicationId: value })}/>
                    </Form.Item>)}
                <Form.Item label={t('apAccount:attr.enabled')} required>
                    <Switch value={apProduct.enabled} onChange={(enabled) => {
                update({ enabled });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.taxLossRatio')} help={t(`placeholder.taxLossRatio.${apProduct.taxLossRatio ? 'notNull' : 'null'}`)}>
                    <InputNumber value={apProduct.taxLossRatio} max={5} min={0.01} addonAfter={"%"} step={0.01} precision={2} onChange={(value) => {
                const taxLossRatio = value;
                update({ taxLossRatio });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.refundCompensateRatio')} help={t(`placeholder.refundCompensateRatio.${apProduct.refundCompensateRatio ? 'notNull' : 'null'}`)}>
                    <InputNumber value={apProduct.refundCompensateRatio} max={5} min={0.01} addonAfter={"%"} step={0.01} precision={2} onChange={(value) => {
                const refundCompensateRatio = value;
                update({ refundCompensateRatio });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.refundGapDays')} help={t(`placeholder.refundGapDays.${apProduct.refundGapDays ? 'notNull' : 'null'}`)}>
                    <InputNumber value={apProduct.refundGapDays} max={300} min={0} step={1} onChange={(value) => {
                const refundGapDays = value;
                update({ refundGapDays });
            }}/>
                </Form.Item>
                {apProduct.type === 'mp' && <Form.Item label={t('apAccount:attr.needReceiving')} help={t('placeholder.needReceiving')} required>
                    <Switch value={!!apProduct.needReceiving} onChange={(needReceiving) => {
                    update({ needReceiving });
                }}/>
                </Form.Item>}
                {apProduct.type === 'native' && (<Form.Item label={t('prepayMethod')} tooltip={t('prepayMethodTip')} required>
                        <Radio.Group value={apProduct?.config?.prepayMethod} options={[
                    { value: 'GET', label: 'GET' },
                    { value: 'POST', label: 'POST' },
                ]} onChange={(e) => {
                    const prepayMethod = e.target.value;
                    update({ config: {
                            ...(apProduct?.config || {}),
                            prepayMethod
                        } });
                }}/>
                    </Form.Item>)}
                {(!['person', 'app'].includes(apProduct.type)) && <Form.Item label={t('returnUrl')} help={t('placeholder.returnUrl')} tooltip={t('returnUrlTip')}>
                    <Input maxLength={32} value={apProduct?.config?.returnUrl} onChange={({ currentTarget }) => {
                    const returnUrl = currentTarget.value;
                    update({ config: {
                            ...(apProduct?.config || {}),
                            returnUrl
                        } });
                }}/>
                </Form.Item>}
                {apProduct.type === 'native' && (<Form.Item label={t('prepayMethod')} tooltip={t('prepayMethodTip')} required>
                        <Radio.Group style={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 8,
                }} value={apProduct?.config?.qrPayMode} options={[
                    { value: '2', label: t('qrPayModeMap.2') },
                    { value: '0', label: t('qrPayModeMap.0') },
                    { value: '1', label: t('qrPayModeMap.1') },
                    { value: '3', label: t('qrPayModeMap.3') },
                    { value: '4', label: t('qrPayModeMap.4') },
                ]} onChange={(e) => {
                    const qrPayMode = e.target.value;
                    update({ config: {
                            ...(apProduct?.config || {}),
                            qrPayMode
                        } });
                }}/>
                    </Form.Item>)}
                {apProduct.type === 'native' && apProduct?.config?.qrPayMode === 4 && <Form.Item label={t('qrCodeWidth')} tooltip={t('qrCodeWidthTip')}>
                    <Input maxLength={32} value={apProduct?.config?.qrCodeWidth} onChange={({ currentTarget }) => {
                    const qrCodeWidth = currentTarget.value;
                    update({ config: {
                            ...(apProduct?.config || {}),
                            qrCodeWidth: qrCodeWidth ? Number(qrCodeWidth) : undefined
                        } });
                }}/>
                </Form.Item>}
            </Form>);
    }
    return null;
}