import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { uuid } from "../../utils/index.js";
import React, { forwardRef, memo, useEffect, useState } from "react";
import { Button, Card, Dropdown, Flex, Form, Input, Modal, Radio } from "antd";
import { MoreOutlined, SwapOutlined } from "@ant-design/icons";
import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
//#region src/components/buttonGroupEdit/index.tsx
const commonStyle = {
	cursor: "move",
	transition: "transform 0.3s ease"
};
const DraggableButton = ({ buttonItem, buttonList, onEdit }) => {
	const { id, isMore = false, children = "", buttonProps = {} } = buttonItem;
	const { listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
	const style = transform ? _objectSpread2(_objectSpread2({}, commonStyle), {}, {
		transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
		transition: isDragging ? "unset" : transition
	}) : commonStyle;
	const handleClick = (e) => {
		if (isDragging) {
			e.stopPropagation();
			e.preventDefault();
			return;
		}
	};
	const menu = {
		items: buttonList.filter((item) => !item.isMore).map((item) => ({
			key: item.id,
			label: item.children
		})),
		onClick: (e) => {
			onEdit(buttonList.find((item) => item.id === e.key));
		}
	};
	return /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({ ref: setNodeRef }, listeners), {}, { style }), isMore ? /* @__PURE__ */ React.createElement(Dropdown, { menu }, /* @__PURE__ */ React.createElement(Button, { onClick: handleClick }, /* @__PURE__ */ React.createElement(MoreOutlined, null))) : /* @__PURE__ */ React.createElement(Button, _objectSpread2(_objectSpread2({ style }, buttonProps), {}, { onClick: () => onEdit(buttonItem) }), children));
};
var buttonGroupEdit_default = memo(forwardRef((props, ref) => {
	const [buttonList, setButtonList] = useState(props.buttonList);
	const [buttonGroupList, setButtonGroupList] = useState(props.buttonGroupList);
	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
	const [isModalVisible, setIsModalVisible] = useState(false);
	const [currentButton, setCurrentButton] = useState(null);
	const [form] = Form.useForm();
	useEffect(() => {
		setButtonList(props.buttonList);
		if (props.buttonList.length > 0) setButtonList([...buttonList, {
			id: uuid(),
			isMore: true
		}]);
		else setButtonGroupList(props.buttonGroupList);
	}, [props.buttonList, props.buttonGroupList]);
	const addRow = () => {
		const newButton = {
			id: uuid(),
			children: `按钮${uuid()}`,
			buttonProps: { type: "default" }
		};
		setButtonGroupList((prev) => [...prev, [newButton]]);
	};
	useEffect(() => {
		if (currentButton) {
			var _currentButton$button;
			form.setFieldsValue({
				children: currentButton.children,
				type: (_currentButton$button = currentButton.buttonProps) === null || _currentButton$button === void 0 ? void 0 : _currentButton$button.type
			});
		}
	}, [currentButton, form]);
	const handleEditButton = (button) => {
		setCurrentButton(button);
		setIsModalVisible(true);
	};
	const handleCancel = () => {
		setIsModalVisible(false);
		setCurrentButton(null);
	};
	const handleSave = (values) => {
		if (!currentButton) return;
		const updatedButton = _objectSpread2(_objectSpread2({}, currentButton), {}, {
			children: values.children,
			buttonProps: values
		});
		setButtonList((prevList) => prevList.map((item) => item.id === currentButton.id ? _objectSpread2(_objectSpread2({}, item), updatedButton) : item));
		setButtonGroupList((prevGroupList) => prevGroupList.map((row) => row.map((item) => item.id === currentButton.id ? _objectSpread2(_objectSpread2({}, item), updatedButton) : item)));
		handleCancel();
	};
	const onDragEnd = (event) => {
		var _active$data, _over$data;
		const { active, over } = event;
		if (!over) return;
		let activeId = active.id;
		let overId = over.id;
		let activeContainerId = "";
		let overContainerId = "";
		if (active === null || active === void 0 || (_active$data = active.data) === null || _active$data === void 0 ? void 0 : _active$data.current) activeContainerId = active.data.current.sortable.containerId;
		if (over === null || over === void 0 || (_over$data = over.data) === null || _over$data === void 0 ? void 0 : _over$data.current) overContainerId = over.data.current.sortable.containerId;
		try {
			if (activeContainerId === "list1" && overContainerId === "list2") {
				const activeIndex = buttonList.findIndex((item) => item.id === activeId);
				if (activeIndex === -1) return;
				const movedItem = _objectSpread2({}, buttonList[activeIndex]);
				const overRowIndex = buttonGroupList.findIndex((row) => row.some((item) => item.id === overId));
				if (overRowIndex === -1) return;
				const updatedGroupList = [...buttonGroupList];
				updatedGroupList[overRowIndex].push(movedItem);
				const updatedButtonList = buttonList.filter((item) => item.id !== activeId);
				setButtonGroupList(updatedGroupList);
				setButtonList(updatedButtonList);
			}
			if (activeContainerId === "list2" && overContainerId === "list1") {
				var _buttonGroupList$over;
				const overRowIndex = buttonGroupList.findIndex((row) => row.some((item) => item.id === overId));
				if (overRowIndex === -1) return;
				const overColIndex = (_buttonGroupList$over = buttonGroupList[overRowIndex]) === null || _buttonGroupList$over === void 0 ? void 0 : _buttonGroupList$over.findIndex((item) => item.id === overId);
				if (overColIndex === -1) return;
				const [movedItem] = buttonGroupList[overRowIndex].splice(overColIndex, 1);
				setButtonGroupList([...buttonGroupList]);
				setButtonList((prev) => [...prev, movedItem]);
			}
			if (activeContainerId === "list1" && overContainerId === "list1") {
				const activeIndex = buttonList.findIndex((item) => item.id === activeId);
				const overIndex = buttonList.findIndex((item) => item.id === overId);
				if (activeIndex === -1 || overIndex === -1) return;
				const updatedList = [...buttonList];
				const [movedItem] = updatedList.splice(activeIndex, 1);
				updatedList.splice(overIndex, 0, movedItem);
				setButtonList(updatedList);
			}
			if (activeContainerId === "list2" && overContainerId === "list2") {
				var _buttonGroupList$acti, _buttonGroupList$over2;
				const activeRowIndex = buttonGroupList.findIndex((row) => row.some((item) => item.id === activeId));
				const activeColIndex = (_buttonGroupList$acti = buttonGroupList[activeRowIndex]) === null || _buttonGroupList$acti === void 0 ? void 0 : _buttonGroupList$acti.findIndex((item) => item.id === activeId);
				const overRowIndex = buttonGroupList.findIndex((row) => row.some((item) => item.id === overId));
				const overColIndex = (_buttonGroupList$over2 = buttonGroupList[overRowIndex]) === null || _buttonGroupList$over2 === void 0 ? void 0 : _buttonGroupList$over2.findIndex((item) => item.id === overId);
				if (activeRowIndex === -1 || overRowIndex === -1 || activeColIndex === -1 || overColIndex === -1) return;
				const updatedGroupList = [...buttonGroupList];
				const [movedItem] = updatedGroupList[activeRowIndex].splice(activeColIndex, 1);
				updatedGroupList[overRowIndex].splice(overColIndex, 0, movedItem);
				setButtonGroupList(updatedGroupList);
			}
		} catch (error) {
			console.error("拖拽结束时出错:", error);
		}
	};
	return /* @__PURE__ */ React.createElement(Flex, {
		wrap: true,
		justify: "space-between",
		align: "center",
		gap: "middle"
	}, /* @__PURE__ */ React.createElement(DndContext, {
		onDragEnd,
		sensors,
		collisionDetection: closestCenter
	}, /* @__PURE__ */ React.createElement(Card, { title: "按钮列表" }, /* @__PURE__ */ React.createElement(SortableContext, {
		id: "list1",
		items: buttonList.map((item) => item.id),
		strategy: verticalListSortingStrategy
	}, /* @__PURE__ */ React.createElement(Flex, {
		gap: "middle",
		vertical: true
	}, buttonList.map((item) => /* @__PURE__ */ React.createElement(DraggableButton, {
		key: item.id,
		buttonItem: item,
		buttonList,
		onEdit: handleEditButton
	}))))), /* @__PURE__ */ React.createElement(Button, {
		type: "primary",
		icon: /* @__PURE__ */ React.createElement(SwapOutlined, null)
	}), /* @__PURE__ */ React.createElement(Card, {
		title: "调整列表",
		style: { flex: 1 }
	}, /* @__PURE__ */ React.createElement(SortableContext, {
		id: "list2",
		items: buttonGroupList.flat().map((item) => item.id),
		strategy: verticalListSortingStrategy
	}, /* @__PURE__ */ React.createElement(Flex, {
		gap: "middle",
		vertical: true
	}, buttonGroupList.map((subItem, rowIndex) => /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(Flex, {
		key: rowIndex,
		gap: "middle"
	}, subItem.map((item) => /* @__PURE__ */ React.createElement(DraggableButton, {
		key: item.id,
		buttonItem: item,
		buttonList,
		onEdit: handleEditButton
	}))))))))), /* @__PURE__ */ React.createElement(Button, {
		type: "primary",
		onClick: addRow
	}, "新增一行"), /* @__PURE__ */ React.createElement(Modal, {
		title: "编辑按钮属性",
		open: isModalVisible,
		onCancel: handleCancel,
		footer: null
	}, currentButton && /* @__PURE__ */ React.createElement(Form, {
		form,
		onFinish: handleSave
	}, /* @__PURE__ */ React.createElement(Form.Item, {
		name: "children",
		label: "按钮名称",
		rules: [{
			required: true,
			message: "请输入按钮名称"
		}]
	}, /* @__PURE__ */ React.createElement(Input, { placeholder: "请输入按钮名称" })), /* @__PURE__ */ React.createElement(Form.Item, {
		name: "type",
		label: "按钮类型",
		rules: [{
			required: true,
			message: "请选择按钮类型"
		}]
	}, /* @__PURE__ */ React.createElement(Radio.Group, null, /* @__PURE__ */ React.createElement(Radio.Button, { value: "primary" }, "primary"), /* @__PURE__ */ React.createElement(Radio.Button, { value: "dashed" }, "dashed"), /* @__PURE__ */ React.createElement(Radio.Button, { value: "link" }, "link"), /* @__PURE__ */ React.createElement(Radio.Button, { value: "text" }, "text"), /* @__PURE__ */ React.createElement(Radio.Button, { value: "default" }, "default"))), /* @__PURE__ */ React.createElement(Form.Item, null, /* @__PURE__ */ React.createElement(Button, {
		type: "primary",
		htmlType: "submit"
	}, "保存")))));
}));
//#endregion
export { buttonGroupEdit_default as default };
