import React, { useState } from 'react';
import { Button, Row, Tabs } from 'antd';
import Styles from './web.pc.module.less';
import PayConfigUpsert from '../upsert';
import { PAY_CHANNEL_WECHAT_JS_NAME, PAY_CHANNEL_WECHAT_H5_NAME, PAY_CHANNEL_WECHAT_MP_NAME, PAY_CHANNEL_WECHAT_NATIVE_NAME } from '../../../types/PayConfig';
import { generateNewId } from 'oak-domain/lib/utils/uuid';
const SystemPayChannels = []; // [label, value]
const ApplicationPayChannels = {};
/**
 *
 * @param channel [label, value]
 */
export function registerSystemPayChannel(channel) {
    SystemPayChannels.push(channel);
}
/**
 *
 * @param type
 * @param channel  [label, value]
 */
export function registerApplicationPayChannel(type, channel) {
    if (ApplicationPayChannels[type]) {
        ApplicationPayChannels[type].push(channel);
    }
    else {
        ApplicationPayChannels[type] = [channel];
    }
}
const DefaultApplicationPayChannels = {
    web: [PAY_CHANNEL_WECHAT_JS_NAME, PAY_CHANNEL_WECHAT_H5_NAME, PAY_CHANNEL_WECHAT_NATIVE_NAME],
    wechatMp: [PAY_CHANNEL_WECHAT_MP_NAME],
    wechatPublic: [PAY_CHANNEL_WECHAT_JS_NAME],
};
export default function render(props) {
    const { system, oakFullpath, operation, oakDirty } = props.data;
    const { t, update, setMessage, execute } = props.methods;
    const defaultApplicationPayChannelDict = {
        web: DefaultApplicationPayChannels.web.map(ele => [t(`payChannel::${ele}`), ele]),
        wechatMp: DefaultApplicationPayChannels.wechatMp.map(ele => [t(`payChannel::${ele}`), ele]),
        wechatPublic: DefaultApplicationPayChannels.wechatPublic.map(ele => [t(`payChannel::${ele}`), ele]),
    };
    const [key, setKey] = useState('');
    if (system && oakFullpath) {
        const { payConfig, application$system: applications } = system;
        return (<div className={Styles.container}>
                <Row justify="end" style={{ marginBottom: 12 }}>
                    <Button type="primary" disabled={!oakDirty} onClick={() => execute()}>
                        {t('common::action.save')}
                    </Button>
                </Row>
                <Tabs tabPosition="left" items={[
                {
                    label: (<div className={Styles.systemLabel}>
                                    {t('system')}
                                </div>),
                    key: 'system',
                    children: (<PayConfigUpsert key="system" config={payConfig} update={(config) => update({ payConfig: config })} channels={SystemPayChannels.concat([[t('payChannel::ACCOUNT'), 'ACCOUNT'], [t('payChannel::OFFLINE'), 'OFFLINE']])} t={t}/>),
                },
                {
                    label: (<div className={Styles.padding}>
                                    {t('appsBelow')}
                                </div>),
                    disabled: true,
                    key: 'padding',
                },
                ...applications.map((app) => {
                    const { type, id, payConfig: appPayConfig } = app;
                    return {
                        key: id,
                        label: (<div>
                                            {app.name}
                                        </div>),
                        children: (<PayConfigUpsert key={id} config={appPayConfig} update={(config) => update({
                                application$system: {
                                    id: generateNewId(),
                                    action: 'update',
                                    data: {
                                        payConfig: config,
                                    },
                                    filter: {
                                        id,
                                    }
                                }
                            })} channels={(defaultApplicationPayChannelDict[type] || []).concat(ApplicationPayChannels[type] || [])} t={t}/>),
                    };
                })
            ]} onTabClick={(activeKey) => {
                if (key && operation) {
                    const { application$system } = operation.data;
                    const { filter } = application$system;
                    if (filter?.id === key) {
                        setMessage({
                            type: 'warning',
                            content: t('mayLossUpdate', {
                                name: applications?.find(ele => ele.id === key).name
                            }),
                        });
                    }
                }
                setKey(activeKey);
            }}/>
            </div>);
    }
    return null;
}