import { getText } from "../../../locales/index.js";
import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React, { useEffect, useMemo, useState } from "react";
import { Tooltip } from "antd";
import { EyeInvisibleOutlined, EyeOutlined, WarningOutlined } from "@ant-design/icons";
import classNames from "classnames";
import DotsSix from "@pisell/icon/es/DotsSix";
import { DndContext } from "@dnd-kit/core";
import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
import "./index.less";
//#region src/components/drag-sort-tree/TreeItem/index.tsx
const prefix = "pisell-lowcode";
const TreeItem = (props) => {
	const { id, item, depth, sensors, childrenProps, lists, expandedKeys, onChange } = props;
	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
	const [isMobile, setIsMobile] = useState(window.innerWidth < 600);
	const style = {
		transform: CSS.Transform.toString(transform && _objectSpread2(_objectSpread2({}, transform), {}, { scaleY: 1 })),
		transition,
		display: item.domHidden ? "none" : "block"
	};
	const rowKey = useMemo(() => {
		return (childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.rowKey) || "id";
	}, [childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.rowKey]);
	const handleDragEnd = (event) => {
		const { active, over } = event;
		if (!over || !active || !lists.length) return;
		try {
			var _active$id, _over$id;
			let [activeParentId, activeId] = active === null || active === void 0 || (_active$id = active.id) === null || _active$id === void 0 ? void 0 : _active$id.split("-");
			let [overParentId, overId] = over === null || over === void 0 || (_over$id = over.id) === null || _over$id === void 0 ? void 0 : _over$id.split("-");
			const parentIndex = lists.findIndex((item) => item[rowKey] == activeParentId);
			if (activeId !== overId && activeParentId === overParentId && parentIndex !== -1) {
				const activeIndex = item.children.findIndex((item) => item[rowKey] == activeId);
				const overIndex = item.children.findIndex((item) => item[rowKey] == overId);
				if (activeIndex !== -1 && overIndex !== -1) {
					var _lists$parentIndex;
					const newChildren = arrayMove((_lists$parentIndex = lists[parentIndex]) === null || _lists$parentIndex === void 0 ? void 0 : _lists$parentIndex.children, activeIndex, overIndex);
					const _lists = [
						...lists.slice(0, parentIndex),
						_objectSpread2(_objectSpread2({}, lists === null || lists === void 0 ? void 0 : lists[parentIndex]), {}, { children: newChildren }),
						...lists.slice(parentIndex + 1)
					];
					onChange && onChange([..._lists]);
				}
			}
		} catch (error) {}
	};
	/**
	* @title: 点击切换眼睛
	* @description:
	* @param {any} e
	* @return {*}
	* @Author: WangHan
	* @Date: 2024-07-19 22:43
	*/
	const handleShow = (e) => {
		e.stopPropagation();
		e.preventDefault();
		const index = lists === null || lists === void 0 ? void 0 : lists.findIndex((node) => node[rowKey] === item[rowKey]);
		if (index !== -1) {
			lists[index].show = !lists[index].show;
			onChange === null || onChange === void 0 || onChange([...lists]);
		}
	};
	const onSelect = () => {
		var _item$children;
		if (depth === 0 && ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) {
			const key = item[rowKey];
			!(childrenProps === null || childrenProps === void 0) && childrenProps.onHiddenChange && (childrenProps === null || childrenProps === void 0 || childrenProps.onHiddenChange(key));
		}
	};
	const renderChildren = useMemo(() => {
		var _item$children2;
		const showChildren = (item === null || item === void 0 || (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length) > 0 && (expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.includes(item[rowKey]));
		const _isAvailableTab = (childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.tabKey) === "available";
		return showChildren && /* @__PURE__ */ React.createElement(SortableContext, {
			items: item.children.map((child) => `${item[rowKey]}-${child[rowKey]}`),
			strategy: verticalListSortingStrategy
		}, item.children.map((child) => _isAvailableTab && (child === null || child === void 0 ? void 0 : child.is_available) || !_isAvailableTab ? /* @__PURE__ */ React.createElement(TreeItem, {
			id: `${item[rowKey]}-${child[rowKey]}`,
			key: `${item[rowKey]}-${child[rowKey]}`,
			item: child,
			lists,
			depth: depth + 1,
			childrenProps
		}) : null));
	}, [
		item.children,
		expandedKeys,
		rowKey,
		lists,
		childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.tabKey,
		isDragging
	]);
	const rightIcon = useMemo(() => {
		return !(childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.hiddenRightIcon) ? /* @__PURE__ */ React.createElement("div", {
			className: classNames(`${prefix}-drag-sort-tree-icon`),
			onClick: handleShow
		}, item.show ? /* @__PURE__ */ React.createElement(EyeOutlined, null) : /* @__PURE__ */ React.createElement(EyeInvisibleOutlined, null)) : null;
	}, [
		childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.hiddenRightIcon,
		item === null || item === void 0 ? void 0 : item.show,
		lists
	]);
	const warningIcon = useMemo(() => {
		return !(childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.hiddenWarningIcon) && !(item === null || item === void 0 ? void 0 : item.is_available) ? /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefix}-drag-sort-tree-item-icon`) }, /* @__PURE__ */ React.createElement(Tooltip, {
			title: getText("drag-sort-tree-unavailable-today-tip"),
			color: "#ffffff",
			overlayInnerStyle: { color: "#344054" }
		}, /* @__PURE__ */ React.createElement(WarningOutlined, { style: { color: "#FF2020" } }))) : null;
	}, [childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.hiddenWarningIcon, item === null || item === void 0 ? void 0 : item.is_available]);
	const handleWindowResize = () => {
		let windowWidth = window.innerWidth;
		setIsMobile(windowWidth < 600);
	};
	useEffect(() => {
		window.addEventListener("resize", handleWindowResize);
		return () => {
			window.removeEventListener("resize", handleWindowResize);
		};
	}, []);
	return /* @__PURE__ */ React.createElement(DndContext, {
		sensors,
		modifiers: [restrictToVerticalAxis, restrictToParentElement],
		onDragEnd: handleDragEnd
	}, /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({
		ref: setNodeRef,
		style
	}, attributes), !isMobile ? listeners : {}), /* @__PURE__ */ React.createElement("div", {
		className: classNames(`${prefix}-drag-sort-tree`, childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.className, isMobile ? `${prefix}-drag-sort-phone-tree` : ""),
		style: {
			paddingLeft: !depth ? "10px" : `${depth * 40}px`,
			cursor: isDragging ? "grabbing" : "grab"
		},
		onClick: onSelect
	}, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefix}-drag-sort-tree-item`) }, !(childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.hiddenDraggableIcon) ? /* @__PURE__ */ React.createElement(DotsSix, _objectSpread2(_objectSpread2({}, isMobile ? listeners : {}), {}, {
		className: classNames(`${prefix}-drag-sort-tree-item-dot-icon`),
		style: { left: isMobile ? !depth ? "-14px" : "12px" : 0 }
	})) : null, /* @__PURE__ */ React.createElement("div", { className: `${prefix}-drag-sort-tree-title` }, (childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.titleRender) || (item === null || item === void 0 ? void 0 : item.title))), !depth ? rightIcon : warningIcon), renderChildren));
};
//#endregion
export { TreeItem as default };
