import React from 'react';
import { Tabs, Button, Alert, Affix, Space, Typography } from 'antd';
import Style from './web.module.less';
import Account from './account/index';
import Cos from './cos/index';
import Map from './map/index';
import Live from './live/index';
import Sms from './sms/index';
import Email from './email/index';
import Basic from './basic/index';
import Security from './security/index';
import Password from './password/index';
export default function Render(props) {
    const { entity, name, currentConfig, dirty } = props.data;
    const { resetConfig, updateConfig, setValue, setValues, removeItem, cleanKey, t } = props.methods;
    const { Account: account, Cos: cos, Map: map, Live: live, Sms: sms, App: app, Emails: emails, Security: security, Password: password, } = currentConfig || {};
    return (<>
            <Affix offsetTop={64}>
                <Alert message={<div>
                            <span>
                                您正在更新
                                <Typography.Text keyboard className={Style.weight}>
                                    {entity}
                                </Typography.Text>
                                对象
                                <Typography.Text keyboard className={Style.weight}>
                                    {name}
                                </Typography.Text>
                                的配置，请谨慎操作
                            </span>
                        </div>} type="info" showIcon action={<Space>
                            <Button disabled={!dirty} type="primary" danger onClick={() => resetConfig()} style={{
                marginRight: 10,
            }}>
                                {t('common::reset')}
                            </Button>
                            <Button disabled={!dirty} type="primary" onClick={() => updateConfig()}>
                                {t('common::action.confirm')}
                            </Button>
                        </Space>}/>
            </Affix>
            <div className={Style.container}>
                <Tabs tabPosition="top" items={[
            {
                key: '云平台帐号',
                label: '云平台帐号',
                children: (<Account account={account || {}} setValue={(path, value) => setValue(`Account.${path}`, value)} removeItem={(path, index) => removeItem(`Account.${path}`, index)}/>),
            },
            {
                key: '云存储设置',
                label: '云存储设置',
                children: (<Cos cos={cos || {}} setValue={(path, value) => setValue(`Cos.${path}`, value)} removeItem={(path, index) => removeItem(`Cos.${path}`, index)}/>),
            },
            {
                key: '直播设置',
                label: '直播设置',
                children: (<Live live={live || {}} setValue={(path, value) => setValue(`Live.${path}`, value)}/>),
            },
            {
                key: '地图设置',
                label: '地图设置',
                children: (<Map map={map || {}} setValue={(path, value) => setValue(`Map.${path}`, value)} removeItem={(path, index) => removeItem(`Map.${path}`, index)} cleanKey={(path, key) => cleanKey(`Map${path ? `.${path}` : ''}`, key)}/>),
            },
            {
                key: '短信设置',
                label: '短信设置',
                children: (<Sms sms={sms || {}} setValue={(path, value) => setValue(`Sms.${path}`, value)} removeItem={(path, index) => removeItem(`Sms.${path}`, index)} cleanKey={(path, key) => cleanKey(`Sms.${path}`, key)}/>),
            },
            {
                key: '邮箱设置',
                label: '邮箱设置',
                children: (<Email emails={emails || []} setValue={(path, value) => setValue(`Emails.${path}`, value)} removeItem={(path, index) => removeItem(`Emails`, index)} cleanKey={(path, key) => cleanKey(`Emails.${path}`, key)}/>),
            },
            {
                key: '基础设置',
                label: '基础设置',
                children: (<Basic app={app || {}} setValue={(path, value) => setValue(`App.${path}`, value)}/>),
            },
            {
                key: '安全设置',
                label: '安全设置',
                children: (<Security security={security || {}} setValue={(path, value) => setValue(`Security.${path}`, value)} setValues={(value) => {
                        setValues({
                            Security: value
                        });
                    }}/>),
            },
            {
                key: '密码设置',
                label: '密码设置',
                children: (<Password password={password || {}} setValue={(path, value) => setValue(`Password.${path}`, value)} setValues={(value) => {
                        setValues({
                            Password: value
                        });
                    }}/>),
            },
        ]}></Tabs>
            </div>
        </>);
}