import * as React from 'react';
import {
	Spin,
	Collapse,
	Input,
	Row,
	Col,
	Button,
	Alert,
	Form,
	Modal,
	notification,
	message,
} from 'antd';
import {
	useChangeEmail,
	useSendPhoneCode,
	useChangePhone,
	useGetUrerInfo,
	useChangePassword,
} from '../../hooks/user';
const { Panel } = Collapse;
import SendCode from '../../compontens/button/sendcode';

const layout = {
	labelCol: { span: 3, xl: 4 },
	wrapperCol: { span: 5, xl: 6 },
};
const setUp: React.FC = (props) => {
	const { state: userInfoState, request: requestUserInfo } = useGetUrerInfo();
	const {
		state: changeEmailState,
		request: requestChangeEmail,
	} = useChangeEmail();
	const { request: requtesChangePassWord } = useChangePassword();
	const {
		state: sendCodeState,
		request: requestPhoneCode,
	} = useSendPhoneCode();
	const {
		state: changePhoneState,
		request: requestChangePhone,
	} = useChangePhone();
	const [authPassWordModal, handleChangeAuthState] = React.useState({
		visible: false,
	});
	React.useEffect(() => {
		requestUserInfo();
	}, []);
	const [phoneForm] = Form.useForm();
	const [passWordForm] = Form.useForm();
	// 修改邮箱
	const handleRequestChangeEmial = () => {
		passWordForm.validateFields().then((data: any) => {
			requestChangeEmail({
				...data,
				email: passWordForm.getFieldValue('email'),
			})
				.then(() => {
					message.success('邮件发送成功');
					handleChangeAuthState((preState) => ({
						...preState,
						visible: false,
					}));
				})
				.catch((error) => {
					notification.error({
						message: '修改邮箱错误',
						description: error.message,
					});
				});
		});
	};
	/**
	 * @description 发送验证码
	 */
	const handleSendCode = () => {
		return new Promise<void>((resolve, reject) => {
			phoneForm.validateFields(['phone']).then((data) => {
				requestPhoneCode({ phone: data.phone })
					.then(() => {
						resolve();
					})
					.catch((error) => {
						reject(error.message);
						notification.error({
							message: '验证码发送错误',
							description: error.message,
						});
					});
			});
		});
	};
	/**
	 * @description 修改手机号码
	 */
	const handleChangePhone = (data: any) => {
		requestChangePhone({
			...data,
			vcode: +data.vcode,
		})
			.then(() => {
				message.success('手机号码修改成功');
				phoneForm.resetFields();
				requestUserInfo();
			})
			.catch((error) => {
				notification.error({
					message: '手机号修改失败',
					description: error.message,
				});
			});
	};
	/**
	 * @description 修改密码
	 */
	const handleSubmitPassword = (data: any) => {
		requtesChangePassWord(data)
			.then(() => {
				message.success('修改密码成功');
			})
			.catch((error) => {
				notification.error({
					message: '修改密码失败',
					description: error.message,
				});
			});
	};
	return (
		<Spin spinning={userInfoState.loading}>
			<Collapse defaultActiveKey={['email']} expandIconPosition='right'>
				<Panel
					header={<div>邮箱账号:{userInfoState.data.email}</div>}
					key='email'>
					<Form
						{...layout}
						onFinish={(data) => {
							passWordForm.setFields([
								{
									name: 'email',
									value: data.email,
								},
							]);
							handleChangeAuthState((preState) => ({
								...preState,
								visible: true,
							}));
						}}>
						<Form.Item
							label='新邮箱地址'
							required
							name='email'
							rules={[
								{ type: 'email', message: '请输入正确得邮箱' },
								{ required: true, message: '请输入邮箱地址' },
							]}
							children={<Input placeholder='新邮箱地址'></Input>}></Form.Item>
						<Row>
							<Col span={8} xl={10}>
								<Alert
									message='系统会发送确认邮件到您的新邮箱中, 请查收后点击邮件中的地址完成修改'
									type='info'
								/>
							</Col>
						</Row>
						<br />
						<Form.Item
							colon={false}
							label=' '
							children={
								<Button
									type='primary'
									htmlType='submit'
									loading={changeEmailState.loading}>
									发送确认邮件
								</Button>
							}></Form.Item>
					</Form>
				</Panel>
				<Panel header={<div>手机号码:{userInfoState.data.phone}</div>} key='2'>
					<Form {...layout} form={phoneForm} onFinish={handleChangePhone}>
						<Form.Item
							label='新手机号'
							name='phone'
							validateFirst
							rules={[{ required: true, message: '请输入手机号' }]}
							children={
								<Input
									addonBefore='中国大陆+86'
									placeholder='您的手机号码'></Input>
							}></Form.Item>
						<Form.Item
							label='验证码'
							name='vcode'
							rules={[
								{
									required: true,
									message: '请输入验证码',
									len: 4,
								},
							]}
							children={
								<Row gutter={0} justify='space-between'>
									<Col span={16}>
										<Input placeholder='请输入验证码'></Input>
									</Col>
									<Col span={8}>
										<SendCode handleSend={handleSendCode}></SendCode>
									</Col>
								</Row>
							}></Form.Item>
						<Row align='middle'>
							<Col offset={3}>
								<Button
									type='primary'
									htmlType='submit'
									loading={changePhoneState.loading}>
									确认
								</Button>
							</Col>
						</Row>
					</Form>
				</Panel>
				<Panel header={<div>登录密码</div>} key='3'>
					<Form {...layout} onFinish={handleSubmitPassword}>
						<Form.Item
							required
							name='old'
							validateFirst
							rules={[{ required: true, message: '请输入原密码' }]}
							label='原密码'
							children={
								<Input.Password placeholder='原密码'></Input.Password>
							}></Form.Item>
						<Form.Item
							rules={[{ required: true, message: '请输入新密码' }]}
							label='新密码'
							name='new'
							children={
								<Input.Password placeholder='新密码'></Input.Password>
							}></Form.Item>
						<Form.Item
							label='重复密码'
							name='reptyPassword'
							dependencies={['new']}
							rules={[
								{ required: true, message: '请重复输入新密码' },
								({ getFieldValue }) => {
									return {
										validator: (rule, value) => {
											if (!value || getFieldValue('new') === value) {
												return Promise.resolve();
											}
											return Promise.reject('两次密码不一致');
										},
									};
								},
							]}
							children={
								<Input.Password placeholder='再输一次'></Input.Password>
							}></Form.Item>
						<Row align='middle'>
							<Col span={4} offset={3}>
								<Button type='primary' htmlType='submit'>
									确认修改
								</Button>
							</Col>
						</Row>
					</Form>
				</Panel>
			</Collapse>
			<Modal
				title='密码验证'
				visible={authPassWordModal.visible}
				okText='确认'
				onOk={handleRequestChangeEmial}
				onCancel={() => {
					handleChangeAuthState((preState) => ({
						...preState,
						visible: false,
					}));
				}}
				cancelText='取消'>
				<Form form={passWordForm}>
					<Form.Item
						required
						rules={[{ required: true, message: '请输入密码' }]}
						name='password'
						children={
							<Input.Password placeholder='请输入登录密码'></Input.Password>
						}></Form.Item>
				</Form>
			</Modal>
		</Spin>
	);
};
export default setUp;
