/** @format */
import React, { useEffect, useRef } from "react";
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css";
import { useNavigate } from "react-router-dom";
import "aieditor/dist/style.css";
import styles from "./index.module.less";
import { ProCard } from "@ant-design/pro-components";
import { Button, Card, Form, FormListFieldData, FormProps, Input, Select } from "antd";
import { CloseOutlined, LeftOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import selectOptions from "@/components/Main/Settings/settings.ts";

const ShareAdd: React.FunctionComponent = () => {
	const navigate = useNavigate();
	const divRef = useRef(null);
	const fromRef: any = useRef();
	const [isDisabled, setIsDisabled] = React.useState(false);

	const onFinish: FormProps["onFinish"] = (values) => {
		console.log("Success:", values);
	};
	useEffect(() => {
		if (divRef.current) {
			const aiEditor = new AiEditor({
				element: divRef.current,
				placeholder: "点击输入描述...",
				contentRetention: true,
				textSelectionBubbleMenu: {
					enable: true,
					items: ["ai", "Bold", "Italic", "Underline", "Strike", "code", "comment"],
				},
				onChange: async (value) => {
					fromRef.current.setFieldsValue({
						content: value.getHtml(),
					});
				},
			});
			return () => {
				aiEditor.destroy();
			};
		}
	}, []);
	return (
		<>
			<div className={styles.share_add_main}>
				<ProCard bordered={true}>
					<Button
						shape="circle"
						icon={<LeftOutlined />}
						onClick={() => {
							navigate("/main/share/list/1");
						}}
					/>
				</ProCard>
				<div className={styles.share_add_content}>
					<Form onFinish={onFinish} autoComplete="off" ref={fromRef}>
						<Form.Item
							label={"标题"}
							name="title"
							id={"title"}
							rules={[{ required: true, message: "请输入标题" }]}>
							<Input name="title" maxLength={50} showCount></Input>
						</Form.Item>
						<Form.Item
							label={"图标"}
							id={"icon"}
							name="icon"
							rules={[{ required: true, message: "请输入图标" }]}>
							<Input name="icon"></Input>
						</Form.Item>
						<Form.Item
							label={"摘要"}
							id={"description"}
							name="description"
							rules={[{ required: true, message: "请输入摘要" }]}>
							<Input name="description" maxLength={100} showCount></Input>
						</Form.Item>
						<Form.Item label={"介绍"} name={"content"} id={"content"}>
							<div
								ref={divRef}
								style={{ height: "300px", maxWidth: "100%", minWidth: "100%" }}
							/>
						</Form.Item>
						<Form.List
							name="tags"
							rules={[
								{
									validator: async (_, tags) => {
										if (!tags) {
											return Promise.reject(new Error("请至少填写一个标签"));
										}
										if (tags.length >= 3) {
											setIsDisabled(true);
											return Promise.reject(
												new Error("最多只能添加五个标签"),
											);
										}
									},
								},
							]}>
							{(fields: FormListFieldData[], { add, remove }, { errors }) => (
								<>
									{fields.map((field: FormListFieldData, index: number) => (
										<Form.Item
											label={"标签" + (index + 1)}
											key={index}
											id={"tags"}>
											<Form.Item
												validateTrigger={["onChange", "onBlur"]}
												name={[field.name, "tag"]}
												noStyle>
												<Input
													placeholder="请输入标签"
													maxLength={10}
													showCount
													style={{ width: "20%" }}
												/>
											</Form.Item>
											{fields.length > 0 ? (
												<MinusCircleOutlined
													className="dynamic-delete-button"
													onClick={() => {
														setIsDisabled(false);
														remove(field.name);
													}}
												/>
											) : null}
										</Form.Item>
									))}
									<Form.Item>
										<Button
											type="dashed"
											disabled={isDisabled}
											onClick={() => add()}
											style={{ width: "100%" }}
											icon={<PlusOutlined />}>
											添加标签
										</Button>
										<Form.ErrorList errors={errors} />
									</Form.Item>
								</>
							)}
						</Form.List>

						<Form.List name="urls">
							{(fields: FormListFieldData[], { add, remove }) => (
								<div
									style={{
										display: "flex",
										rowGap: 16,
										flexDirection: "column",
									}}>
									{fields.map((field: FormListFieldData, index: number) => (
										<Card
											size="small"
											title={`链接 ${index + 1}`}
											key={index}
											extra={
												<CloseOutlined
													onClick={() => {
														remove(field.name);
													}}
												/>
											}>
											<Form.Item name={[field.name, "type"]} label="分享类型">
												<Select
													size="middle"
													style={{ width: "20%" }}
													showSearch={true}
													allowClear={true}
													notFoundContent={"未找到哦"}
													placeholder={"请选择分享类型"}>
													{selectOptions.map(
														(storage: any, index: any) => {
															return (
																<Select.Option
																	value={storage.value}
																	key={index}>
																	{storage.name}
																</Select.Option>
															);
														},
													)}
												</Select>
											</Form.Item>
											<Form.Item
												name={[field.name, "description"]}
												label="资源描述">
												<Input name={"description"} />
											</Form.Item>
											<Form.Item name={[field.name, "url"]} label="资源链接">
												<Input name={"url"} />
											</Form.Item>
											<Form.Item
												name={[field.name, "password"]}
												label={"提取密码"}>
												<Input name={"password"} />
											</Form.Item>
										</Card>
									))}

									<Button type="dashed" onClick={() => add()} block>
										+ 添加分享链接
									</Button>
								</div>
							)}
						</Form.List>
						<Form.Item
							style={{
								display: "flex",
								flexDirection: "row",
								justifyContent: "flex-end",
								marginTop: "2%",
							}}>
							<Button type="primary" htmlType="submit">
								保存
							</Button>
						</Form.Item>
					</Form>
				</div>
			</div>
		</>
	);
};
export default ShareAdd;
