import { CaptchaModal, PageContainer } from '@/components';
import { PERMISSION } from '@/constants';
import { auth } from '@/services';
import { aesEncrypt } from '@/utils/aes';
import { formLayout } from '@/utils/formLayout';
import {
	ProCard,
	ProForm,
	ProFormInstance,
	ProFormText,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Col, message, Row, Space } from 'antd';
import React, { useRef, useState } from 'react';

const Account: React.FC = () => {
	const formRef = useRef<ProFormInstance>();
	const { initialState } = useModel('@@initialState');
	const [visible, setVisible] = useState(false);

	const onFinish = async (token: string) => {
		const data = formRef.current?.getFieldsValue();
		const { success } = await auth.userAuth.updatePassword({
			...data,
			password: aesEncrypt(data.password),
			oldPassword: aesEncrypt(data.oldPassword),
			confirmPassword: aesEncrypt(data.confirmPassword),
			token,
		});

		if (success) {
			message.success('修改密码成功');
		}
	};

	return (
		<PageContainer
			permission={PERMISSION.OPERATION_PERMISSION_VIEW}
			fieldProps={{
				title: '账户设置',
			}}
		>
			<CaptchaModal
				visible={visible}
				setVisible={setVisible}
				onFinish={onFinish}
			/>
			<ProCard>
				<ProForm<AuthAPI.UpdatePasswordCmd & Record<string, any>>
					{...formLayout()}
					// @ts-ignore
					request={() => {
						return {
							userId: initialState?.currentUser?.userId,
						};
					}}
					onFinish={async () => {
						setVisible(true);
					}}
					formRef={formRef}
					submitter={{
						render: (_, dom) => {
							return (
								<Row>
									<Col span={14} offset={4}>
										<Space>{dom}</Space>
									</Col>
								</Row>
							);
						},
					}}
				>
					<ProFormText name={'userId'} hidden={true} />
					<ProFormText label={'账户名'} name={'account'} readonly={true} />
					{/* 旧密码 */}
					<ProFormText
						label={'旧密码'}
						name={'oldPassword'}
						rules={[
							{
								required: true,
								message: '请输入旧密码',
							},
						]}
						fieldProps={{
							type: 'password',
						}}
					/>
					{/* 新密码 */}
					<ProFormText
						label={'新密码'}
						name={'password'}
						rules={[
							{
								required: true,
								message: '请输入新密码',
							},
							{
								validator: (_, value) => {
									if (value === formRef.current?.getFieldValue('oldPassword')) {
										return Promise.reject(new Error('新密码不能与旧密码相同'));
									}
									return Promise.resolve();
								},
							},
							{
								pattern:
									/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
								message:
									'密码必须包含至少一个数字、一个大写字母、一个小写字母和一个特殊字符，并且长度至少为8个字符。',
							},
						]}
						fieldProps={{
							type: 'password',
						}}
					/>
					{/* 确认密码 */}
					<ProFormText
						label={'确认密码'}
						name={'confirmPassword'}
						rules={[
							{
								required: true,
								message: '请再次输入密码',
							},
							{
								validator: (_, value) => {
									if (value !== formRef.current?.getFieldValue('password')) {
										return Promise.reject(new Error('两次输入的密码不一致'));
									}
									return Promise.resolve();
								},
							},
						]}
						fieldProps={{
							type: 'password',
						}}
					/>
				</ProForm>
			</ProCard>
		</PageContainer>
	);
};

export default Account;