import React, { useEffect, useState } from "react";
import { Switch, Form, Input, Space, Tag, InputNumber, } from 'antd';
import Styles from './web.module.less';
import EditorRegexs from "../password/editorRegexs";
export default function LoginName(props) {
    const { passport, t, changeEnabled, updateConfig } = props;
    const { id, type, enabled, stateColor } = passport;
    const config = passport.config || {};
    const [min, setMin] = useState(config?.min);
    const [max, setMax] = useState(config?.max);
    const [regexs, setRegexs] = useState(config?.regexs || []);
    const [register, setRegister] = useState(false);
    const [tip, setTip] = useState(config?.tip || '');
    useEffect(() => {
        setMin(config?.min || 2);
        setMax(config?.max || 8);
        setRegexs(config?.regexs || []);
        setRegister(!!config?.register);
        setTip(config?.tip || '');
    }, [config]);
    return (<div className={Styles.item}>
            <div className={Styles.title}>
                <Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
                <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
            changeEnabled(checked);
        }}/>
            </div>
            {enabled &&
            <div>
                    <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
                        <Form.Item label="账号位数范围" tooltip="账号位数范围">
                            <Space>
                                <InputNumber min={1} max={max} value={min} onChange={(value) => {
                    updateConfig(id, config, 'min', value, 'loginName');
                }}/>
                                <div>~</div>
                                <InputNumber min={min} value={max} onChange={(value) => {
                    updateConfig(id, config, 'max', value, 'loginName');
                }}/>
                            </Space>
                        </Form.Item>
                        <Form.Item label="开启正则校验" tooltip="开启后将使用下方设置的正则表达式对账号进行校验">
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={!!config?.verify} onChange={(checked) => {
                    updateConfig(id, config, 'verify', checked, 'loginName');
                }}/>
                        </Form.Item>
                        <Form.Item label="正则" tooltip="可同时设置多组正则，系统将按照【与】逻辑进行校验，每个正则请以^开头以$结尾">
                            <>
                                {!!config?.verify ? (<>
                                        <EditorRegexs regexs={regexs} updateRegexs={(regexs) => {
                        updateConfig(id, config, 'regexs', regexs, 'loginName');
                    }}/>
                                    </>) : (<div>暂未启用正则校验，无需设置</div>)}
                            </>
                        </Form.Item>
                        <Form.Item label="是否允许注册账号" tooltip="开启后用户可自行注册账号">
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={!!config?.register} onChange={(checked) => {
                    updateConfig(id, config, 'register', checked, 'loginName');
                }}/>
                        </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, 'loginName');
                    }
                }}/>
                        </Form.Item>
                    </Form>
                </div>}
        </div>);
}