import React, { useState } from "react";
import { Switch, Form, Input, Space, Tag, InputNumber, Radio, Tooltip, } from 'antd';
import Styles from './web.module.less';
import EditorRegexs from "./editorRegexs";
export default function Password(props) {
    const { passport, t, changeEnabled, updateConfig } = props;
    const { id, type, enabled, stateColor } = passport;
    const config = passport.config || {};
    const [min, setMin] = useState(config?.min || 8);
    const [max, setMax] = useState(config?.max || 24);
    const [regexs, setRegexs] = useState(config?.regexs || []);
    const [tip, setTip] = useState(config?.tip || '');
    const [mode, setMode] = useState(config?.mode || 'all');
    // useEffect(() => {
    //     setMin(config?.min || 8);
    //     setMax(config?.max || 24);
    //     setRegexs(config?.regexs || []);
    //     setTip(config?.tip || '');
    //     setMode(config?.mode || 'all');
    // }, [config]);
    return (<div className={Styles.item}>
            <div className={Styles.title}>
                <Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
                <Tooltip title="密码登录方式已调整，请关闭该登录方式，对于密码的相关配置请前往系统配置管理中修改密码设置。" placement="topLeft">
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
            changeEnabled(checked);
        }} disabled={!enabled}/>
                </Tooltip>
            </div>
            {enabled &&
            <div>
                    <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
                        <Form.Item label="密码存储模式" tooltip="密码存储模式">
                            <Radio.Group onChange={(e) => updateConfig(id, config, 'mode', e.target.value, 'password')} value={mode}>
                                <Radio value="all">明文与SHA1加密</Radio>
                                <Radio value="plain">仅明文</Radio>
                                <Radio value="sha1">仅SHA1加密</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="密码位数范围" tooltip="密码位数范围">
                            <Space>
                                <InputNumber min={1} max={max} value={min} onChange={(value) => {
                    updateConfig(id, config, 'min', value, 'password');
                }}/>
                                <div>~</div>
                                <InputNumber min={min} value={max} onChange={(value) => {
                    updateConfig(id, config, 'max', value, 'password');
                }}/>
                            </Space>
                        </Form.Item>
                        <Form.Item label="开启正则校验" tooltip="开启后将使用下方设置的正则表达式对密码进行校验">
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={!!config?.verify} onChange={(checked) => {
                    updateConfig(id, config, 'verify', checked, 'password');
                }}/>
                        </Form.Item>
                        <Form.Item label="正则" tooltip="可同时设置多组正则，系统将按照【与】逻辑进行校验，每个正则请以^开头以$结尾">
                            <>
                                {!!config?.verify ? (<>
                                        <EditorRegexs regexs={regexs} updateRegexs={(regexs) => {
                        updateConfig(id, config, 'regexs', regexs, 'password');
                    }}/>
                                    </>) : (<div>暂未启用正则校验，无需设置</div>)}
                            </>
                        </Form.Item>
                        <Form.Item label="密码提示语" tooltip="此提示语将显示在用户设置密码的输入框附近，用于清晰告知用户密码的格式要求">
                            <Input placeholder="请输入密码提示语" type="text" value={tip} onChange={(e) => {
                    setTip(e.target.value);
                }} onBlur={() => {
                    if (tip && tip !== config?.tip) {
                        updateConfig(id, config, 'tip', tip, 'password');
                    }
                }}/>
                        </Form.Item>
                    </Form>
                </div>}
        </div>);
}