import { encrptRsa } from '@/common/helper';
import { MovableModalForm } from '@/components';
import SysUserController from '@/services/apis/SysUserController';
import type { ProFormInstance } from '@ant-design/pro-components';
import { App, Form, Input } from 'antd';
import { useRef, useState } from 'react';

interface ChangePasswordProps {
    onClose: () => void;
}
const ChangePassword: React.FC<ChangePasswordProps> = ({ onClose }) => {
    const [visible, setVisible] = useState<boolean>(true);
    const handleClose = () => {
        setVisible(false);
        setTimeout(onClose, 0);
    };
    const formRef = useRef<ProFormInstance>();

    const { message } = App.useApp();

    return (
        <MovableModalForm<{
            oldPassword: string;
            newPassword: string;
            newPasswordConfirm: string;
        }>
            title="修改密码"
            width="400px"
            open={visible}
            formRef={formRef}
            modalProps={{
                centered: true,
                maskClosable: false,
                onCancel: handleClose,
            }}
            onFinish={async (values) => {
                const hide = message.loading('提交中...', 0);
                const { oldPassword, newPassword } = values;
                const params = {
                    oldPassword: encrptRsa(oldPassword) || '',
                    newPassword: encrptRsa(newPassword) || '',
                };
                try {
                    await SysUserController.changePassword(params);
                    message.success('修改成功');
                    handleClose();
                }
                catch {
                    message.error('修改失败');
                }
                finally {
                    hide();
                }
            }}
        >
            <Form.Item label="原密码" name="oldPassword" rules={[{ required: true }]}>
                <Input type="password" />
            </Form.Item>
            <Form.Item
                label="新密码（6至32位）"
                name="newPassword"
                rules={[
                    { required: true, min: 6, max: 32 },
                    ({ getFieldValue }) => ({
                        validator: (_, value) => {
                            const np2 = getFieldValue('newPasswordConfirm');
                            if (!np2 || np2 === '' || np2 === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject('两次输入新密码不一致！');
                        },
                    }),
                ]}
            >
                <Input type="password" />
            </Form.Item>
            <Form.Item
                label="确认新密码"
                name="newPasswordConfirm"
                rules={[
                    { required: true, min: 6, max: 32 },
                    ({ getFieldValue }) => ({
                        validator: (_, value) => {
                            const np = getFieldValue('newPassword');
                            if (np === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject('两次输入新密码不一致！');
                        },
                    }),
                ]}
            >
                <Input type="password" />
            </Form.Item>
        </MovableModalForm>
    );
};

export default ChangePassword;
