import React, { useState } from 'react';
import { Button, Space, Switch, Affix, Alert, Typography, Modal, Divider, Tag, Row, Tooltip, } from 'antd';
import Styles from './web.pc.module.less';
import classNames from 'classnames';
import { ExclamationCircleFilled } from '@ant-design/icons';
import Sms from './sms';
import Email from './email';
import Password from './password';
import WechatPublicForWeb from './wechatPublicForWeb';
import WechatMpForWeb from './wechatMpForWeb';
import WechatMp from './wechatMp';
import WechatPublic from './wechatPublic';
import LoginName from './loginName';
import Oauth from './oauth';
const { confirm } = Modal;
function AppView(props) {
    const { passport, t, changeEnabled, updateConfig } = props;
    const { id, type, config, enabled, stateColor } = passport;
    return (<div className={classNames(Styles.item, Styles.title)}>
            <Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
            <Tooltip title="暂未支持该登录方式">
                <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} disabled={!enabled} onChange={(checked) => {
            changeEnabled(checked);
        }}/>
            </Tooltip>
        </div>);
}
export default function render(props) {
    const { data, methods } = props;
    const { oakFullpath, oakExecuting, oakDirty, oakLoading, systemId, passports, systemName, oauthOptions } = data;
    const { clean, execute, t, updateItem, updateConfig, checkConfrim, myConfirm } = methods;
    const [createOpen, setCreateOpen] = useState(false);
    const [newType, setNewType] = useState(undefined);
    const showConfirm = (warnings) => {
        confirm({
            title: '确定保存当前更新吗？',
            icon: <ExclamationCircleFilled />,
            width: 540,
            content: <Space direction='vertical'>
                <div>当前登录方式配置存在以下问题可能影响登录：</div>
                {warnings.map((ele) => {
                    return (<div key={ele.id}>
                            <div style={{ width: 200 }}>
                                <Divider orientation="left">{t(`passport:v.type.${ele.type}`)}{t('login')}</Divider>
                            </div>
                            <div style={{ fontSize: 13 }}>{ele.tip}</div>
                        </div>);
                })}
            </Space>,
            async onOk() {
                const ids = warnings.map((ele) => ele.id);
                await myConfirm(ids);
            },
            onCancel() {
            },
        });
    };
    return (<>
            <Affix offsetTop={64}>
                <Alert message={<div>
                            <span>
                                您正在更新
                                <Typography.Text keyboard>
                                    system
                                </Typography.Text>
                                对象
                                <Typography.Text keyboard>
                                    {systemName}
                                </Typography.Text>
                                的登录配置，请谨慎操作
                            </span>
                        </div>} type="info" showIcon action={<Space size={12}>
                            {/* <Button
                disabled={oakLoading || oakExecuting}
                onClick={() => setCreateOpen(true)}
            >
                创建
            </Button> */}
                            <Button disabled={!oakDirty} type="primary" danger onClick={() => clean()}>
                                重置
                            </Button>
                            <Button disabled={!oakDirty} type="primary" onClick={async () => {
                const warnings = checkConfrim();
                if (warnings && warnings.length > 0) {
                    showConfirm(warnings);
                }
                else {
                    await execute();
                }
            }}>
                                确定
                            </Button>
                        </Space>}/>
            </Affix>
            <Row>
                <div className={Styles.tips}>
                    <div>* 如需启用邮箱登录，请先前往配置管理邮箱设置，创建系统邮箱,并完成相关配置</div>
                    <div>* 如需启用小程序授权登录，请先前往应用管理，创建小程序application,并完成基础配置</div>
                    <div>* 如需启用公众号授权登录，请先前往应用管理，创建是服务号的公众号application,并完成基础配置</div>
                    <div>* 如需启用OAuth授权登录，请先前往OAuth管理，创建OAuth供应商,并启用</div>
                </div>
            </Row>
            {passports && passports.map((passport) => {
            switch (passport.type) {
                case 'sms':
                    return (<Sms key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }} updateConfig={updateConfig}/>);
                case 'email':
                    return (<Email key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }} updateConfig={updateConfig}/>);
                case 'password':
                    return (<Password key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }} updateConfig={updateConfig}/>);
                case 'wechatPublicForWeb':
                    return (<WechatPublicForWeb key={passport.id} passport={passport} appIdStr={passport?.appIdStr} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }} updateConfig={updateConfig}/>);
                case 'wechatMpForWeb':
                    return (<WechatMpForWeb key={passport.id} passport={passport} appIdStr={passport?.appIdStr} hasQrCodePrefix={passport?.hasQrCodePrefix} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }} updateConfig={updateConfig}/>);
                case 'wechatMp':
                    return (<WechatMp key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }}/>);
                case 'wechatPublic':
                    return (<WechatPublic key={passport.id} passport={passport} 
                    // publicAppIds={publicAppIds}
                    t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }}/>);
                case 'loginName':
                    return (<LoginName key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }} updateConfig={updateConfig}/>);
                case 'oauth':
                    return (<Oauth key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }} updateConfig={updateConfig} oauthOptions={oauthOptions}/>);
                default:
                    return (<AppView key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
                            updateItem({
                                enabled,
                            }, passport.id);
                        }} updateConfig={updateConfig}/>);
            }
        })}

            {/* <Modal
            title="新建短信登录配置"
            open={createOpen}
            onOk={() => {
                methods.addItem({
                    type: newType,
                    systemId,
                    enabled: false,
                })
                setCreateOpen(false);
            }}
            onCancel={() => {
                setNewType(undefined);
                setCreateOpen(false);
            }}
            destroyOnClose
        >
        </Modal> */}
        </>);
}