/** @format */
import { FunctionComponent, useEffect, useState } from "react";
import { ProCard } from "@ant-design/pro-components";
import {
	Avatar,
	Button,
	Flex,
	Form,
	FormProps,
	Input,
	message,
	Select,
	Skeleton,
	Space,
	Tabs,
	Tag,
} from "antd";
import styles from "./index.module.less";
import TextArea from "antd/es/input/TextArea";
import { getUserInfoApi, updateUserInfo } from "@/api/user";
import { observer } from "mobx-react";
import useStore from "@/utils/store/useStore.tsx";

const UserSetting: FunctionComponent = observer(() => {
	const [disable, setDisable] = useState<boolean>(true);
	const [loading, setLoading] = useState<boolean>(true);
	const [userInfo, setUserInfo] = useState<any>({} as any);
	const [password, setPassword] = useState<string>("");
	const [phone, setPhone] = useState<string>("");
	const [email, setEmail] = useState<string>("");
	const store = useStore("user");
	const userId: any = store.getUserId();
	async function getUserInfo() {
		getUserInfoApi(userId).then((res: any) => {
			console.log(res);
			if (res && res.success && res.data) {
				setUserInfo(res.data);
				setLoading(false);
			}
		});
	}
	type FieldType = {
		nickName?: string;
		// location?: string;
		introduce?: string;
		gender?: string;
		company?: string;
		blog?: string;
	};
	async function updateUser(data: any) {
		updateUserInfo(data).then((res: any) => {
			if (res && res.success) {
				message.open({
					type: "success",
					content: "修改成功",
				});
			} else {
				message.open({
					type: "error",
					content: "修改失败",
				});
			}
		});
	}
	const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
		const data: any = {
			id: userId,
			...values,
		};
		updateUserInfo(data).then((res: any) => {
			if (res && res.success) {
				message.open({
					type: "success",
					content: "修改成功",
				});
			} else {
				message.open({
					type: "error",
					content: "修改失败",
				});
			}
		});
	};

	const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo: any) => {
		message.open({
			type: "error",
			content: errorInfo,
		});
	};
	useEffect(() => {
		getUserInfo().then();
	}, []);
	const prefixSelector = (
		<Select style={{ width: 90 }}>
			<Select.Option value="https://">https://</Select.Option>
			<Select.Option value="http://">http://</Select.Option>
		</Select>
	);
	// const ProFormText = (props: any) => {
	// 	return (
	// 		<ProForm.Item {...props} style={{ height: "10px" }}>
	// 			<ProFormCascader
	// 				request={async () => city}
	// 				width="md"
	// 				name="location"
	// 				disabled={disable}></ProFormCascader>
	// 		</ProForm.Item>
	// 	);
	// };
	useEffect(() => {}, []);
	const TabItems = [
		{
			label: <span>基础信息</span>,
			key: "baseInfo",
			children: (
				<>
					<Skeleton loading={loading} active>
						<div>
							<Form
								name="basic"
								labelCol={{ span: 3 }}
								wrapperCol={{ span: 16 }}
								style={{ maxWidth: 600 }}
								onFinish={onFinish}
								onFinishFailed={onFinishFailed}
								initialValues={{ prefix: "https://" }}
								autoComplete="off">
								{/*<Form.Item<FieldType>*/}
								{/*	label="邮箱"*/}
								{/*	name="email"*/}
								{/*	rules={[*/}
								{/*		{*/}
								{/*			type: "email",*/}
								{/*			message: "请输入正确的邮箱！",*/}
								{/*		},*/}
								{/*		{ required: true, message: "请输入邮箱!" },*/}
								{/*	]}>*/}
								{/*	<Input allowClear disabled={disable} />*/}
								{/*</Form.Item>*/}
								<Form.Item<FieldType>
									label="昵称"
									name="nickName"
									rules={[
										{
											type: "string",
											message:
												"用户名只能是3到16位（字母，数字，下划线，减号）！",
											pattern: /^[a-zA-Z0-9_-]{3,16}$/,
										},
										{
											required: true,
											message: "请输入昵称!",
										},
									]}>
									<Input allowClear disabled={disable} />
								</Form.Item>
								<Form.Item<FieldType>
									label="性别"
									name="gender"
									rules={[{ required: true, message: "请输入性别!" }]}>
									<Select disabled={disable}>
										<Select.Option value="男">男</Select.Option>
										<Select.Option value="女">女</Select.Option>
										<Select.Option value="UNKNOWN">隐私</Select.Option>
									</Select>
								</Form.Item>
								{/*<Form.Item<FieldType>*/}
								{/*	label="地区"*/}
								{/*	name="location"*/}
								{/*	rules={[{ required: true, message: "请输入地区!" }]}>*/}
								{/*	<ProFormText />*/}
								{/*</Form.Item>*/}
								<Form.Item<FieldType> label="公司" name="company">
									<Input allowClear disabled={disable} />
								</Form.Item>
								<Form.Item<FieldType> label="博客" name="blog">
									<Input
										addonBefore={prefixSelector}
										allowClear
										disabled={disable}
									/>
								</Form.Item>
								<Form.Item<FieldType> label="个人简介" name="introduce">
									<TextArea
										rows={4}
										allowClear
										maxLength={200}
										showCount
										placeholder="请输入您的个人简介，最多不超过200字。"
										disabled={disable}
									/>
								</Form.Item>
								<Form.Item wrapperCol={{ offset: 3, span: 16 }}>
									<Space
										style={{
											display: "flex",
											flexDirection: "row",
											justifyContent: "space-between",
											width: "400px",
										}}>
										<Button
											htmlType="button"
											onClick={() => {
												setDisable(!disable);
											}}>
											修改
										</Button>
										<Button type="primary" htmlType="submit" disabled={disable}>
											保存
										</Button>
									</Space>
								</Form.Item>
							</Form>
						</div>
					</Skeleton>
				</>
			),
		},
		{
			label: <span>安全设置</span>,
			key: "security",
			children: (
				<>
					<Skeleton loading={loading} active>
						<Space direction={"vertical"} style={{ width: "100%" }}>
							<ProCard hoverable bordered>
								<Flex vertical={false} align={"center"}>
									<span style={{ width: 100 }}>登录密码：</span>
									<Space.Compact style={{ width: "100%" }}>
										<Input.Password
											onChange={(e: any) => {
												setPassword(e.target.value);
											}}
											variant="borderless"
										/>
										<Button
											type="text"
											onClick={async () => {
												const data: any = {
													id: userId,
													password: password,
												};
												await updateUser(data);
											}}>
											保存
										</Button>
									</Space.Compact>
								</Flex>
							</ProCard>
							<ProCard hoverable bordered>
								<Flex vertical={false} align={"center"}>
									<span style={{ width: 100 }}>安全手机：</span>
									<Space.Compact style={{ width: "100%" }}>
										<Input.Password
											onChange={(e: any) => {
												setPhone(e.target.value);
											}}
											variant="borderless"
										/>
										<Button
											type="text"
											onClick={async () => {
												const data: any = {
													id: userId,
													phone: phone,
												};
												await updateUser(data);
											}}>
											保存
										</Button>
									</Space.Compact>
								</Flex>
							</ProCard>
							<ProCard hoverable bordered>
								<Flex vertical={false} align={"center"}>
									<span style={{ width: 100 }}>安全邮箱：</span>
									<Space.Compact style={{ width: "100%" }}>
										<Input.Password
											onChange={(e: any) => {
												setEmail(e.target.value);
											}}
											variant="borderless"
										/>
										<Button
											type="text"
											onClick={async () => {
												const data: any = {
													id: userId,
													email: email,
												};
												await updateUser(data);
											}}>
											保存
										</Button>
									</Space.Compact>
								</Flex>
							</ProCard>
						</Space>
					</Skeleton>
				</>
			),
		},
	];

	return (
		<>
			<div className={styles.user_setting_main}>
				<ProCard boxShadow>
					<Skeleton loading={loading} active avatar>
						<div className={styles.user_setting_header}>
							<Avatar
								size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
								src={userInfo.avatar}
							/>

							<Flex
								vertical={false}
								align={"center"}
								style={{ height: "100px", marginLeft: 40 }}>
								<Flex vertical={true} justify={"flex-start"}>
									<Flex vertical={false} align={"center"}>
										<span style={{ color: "grey" }}>用户名：</span>
										<span style={{ width: 200 }}>{userInfo.userName}</span>
									</Flex>
									<Flex
										vertical={false}
										align={"center"}
										style={{ marginTop: 20 }}>
										<span style={{ color: "grey" }}>账号ID：</span>
										<span style={{ width: 200 }}>{userInfo.id}</span>
									</Flex>
								</Flex>
								<Flex vertical={true} style={{ marginLeft: 50 }}>
									<Flex vertical={false} align={"center"}>
										<span style={{ color: "grey" }}>邮 箱：</span>
										<span style={{ width: 130 }}>
											{userInfo.email || "---------"}
										</span>
									</Flex>
									<Flex
										vertical={false}
										align={"center"}
										style={{ marginTop: 20 }}>
										<span style={{ color: "grey" }}>手机号：</span>
										<span style={{ width: 130 }}>
											{userInfo.phone || "---------"}
										</span>
									</Flex>
								</Flex>
								<Flex vertical={true} style={{ marginLeft: 50 }}>
									<Flex vertical={false} align={"center"}>
										<span style={{ color: "grey" }}>注册时间：</span>
										<span style={{ width: 130 }}>{userInfo.createdTime}</span>
									</Flex>
									<Flex
										vertical={false}
										align={"center"}
										style={{ marginTop: 20 }}>
										<span style={{ color: "grey" }}>状 态：</span>
										{userInfo.status === 0 ? (
											<Tag color={"success"}>正常</Tag>
										) : (
											<Tag color={"red"}>禁用</Tag>
										)}
									</Flex>
								</Flex>
							</Flex>
						</div>
					</Skeleton>
				</ProCard>

				<div className={styles.user_setting_content}>
					<ProCard boxShadow>
						<Tabs type="card" items={TabItems}></Tabs>
					</ProCard>
				</div>
			</div>
		</>
	);
});
export default UserSetting;