import React, { useEffect, useState } from 'react';
import { Col, Divider, Input, Form, Space, Radio, InputNumber, Switch, } from 'antd';
import Styles from './web.module.less';
import EditorRegexs from '../../../passport/password/editorRegexs';
export default function Password(props) {
    const { password, setValue, setValues } = props;
    const { mode, min, max, verify, regexs, tip } = password || {};
    const [newTip, setNewTip] = useState('');
    useEffect(() => {
        const { password } = props;
        if (!password.mode) {
            setValues({
                mode: 'all',
                min: 8,
                max: 24,
            });
        }
    }, [password]);
    useEffect(() => {
        if (tip && !newTip) {
            setNewTip(tip);
        }
    }, [tip]);
    return (<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
            <Col flex="auto">
                <Divider orientation="left" className={Styles.title}>
                    密码设置
                </Divider>
                <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }}>
                    <Form.Item label="密码存储模式" tooltip="密码存储模式">
                        <Radio.Group onChange={({ target }) => {
            const { value } = target;
            setValue('mode', value);
        }} 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) => {
            setValue('min', value);
        }}/>
                            <div>~</div>
                            <InputNumber min={min} value={max} onChange={(value) => {
            setValue('max', value);
        }}/>
                        </Space>
                    </Form.Item>

                    <Form.Item label="开启正则校验" tooltip="开启后将使用下方设置的正则表达式对密码进行校验">
                        <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={!!verify} onChange={(checked) => {
            setValue('verigy', checked);
        }}/>
                    </Form.Item>
                    <Form.Item label="正则" tooltip="可同时设置多组正则，系统将按照【与】逻辑进行校验，每个正则请以^开头以$结尾">
                        <>
                            {!!verify ? (<>
                                    <EditorRegexs regexs={regexs || []} updateRegexs={(regexs) => {
                setValue('regexs', regexs);
            }}/>
                                </>) : (<div>暂未启用正则校验，无需设置</div>)}
                        </>
                    </Form.Item>
                    <Form.Item label="密码提示语" tooltip="此提示语将显示在用户设置密码的输入框附近，用于清晰告知用户密码的格式要求">
                        <Input placeholder="请输入密码提示语" type="text" value={tip} onChange={(e) => {
            setNewTip(e.target.value);
        }} onBlur={() => {
            if (newTip && newTip !== tip) {
                setValue('tip', newTip);
            }
        }}/>
                    </Form.Item>
                </Form>
            </Col>
        </Space>);
}