import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React from "react";
import { Dropdown, Empty, Spin } from "antd";
import { Button as Button$1 } from "@pisell/materials";
import classNames from "classnames";
import { DeleteOutlined, EditOutlined, HolderOutlined, MoreOutlined, PlusOutlined } from "@ant-design/icons";
import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import "./index.less";
//#region src/plus/saasDevice/devicePlanning/components/WorkAreaList/index.tsx
const SortableWorkAreaItem = ({ item, selected, title, getText, onSelect, onEdit, onDelete }) => {
	const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({ id: item.id });
	const menuItems = [{
		key: "edit",
		icon: /* @__PURE__ */ React.createElement(EditOutlined, null),
		label: getText("pisell2.saas.device-planning.action.edit"),
		onClick: ({ domEvent }) => {
			domEvent.stopPropagation();
			onEdit(item);
		}
	}, {
		key: "delete",
		danger: true,
		icon: /* @__PURE__ */ React.createElement(DeleteOutlined, null),
		label: getText("pisell2.saas.device-planning.action.delete"),
		onClick: ({ domEvent }) => {
			domEvent.stopPropagation();
			onDelete(item);
		}
	}];
	return /* @__PURE__ */ React.createElement("div", {
		ref: setNodeRef,
		className: classNames("saas-device-planning-workarea-item", {
			"is-selected": selected,
			"is-dragging": isDragging
		}),
		style: {
			transform: CSS.Transform.toString(transform),
			transition
		},
		onClick: () => onSelect(item.id)
	}, /* @__PURE__ */ React.createElement("span", _objectSpread2(_objectSpread2({ className: "saas-device-planning-workarea-item__drag" }, attributes), listeners), /* @__PURE__ */ React.createElement(HolderOutlined, null)), /* @__PURE__ */ React.createElement("span", { className: "saas-device-planning-workarea-item__name" }, title), /* @__PURE__ */ React.createElement(Dropdown, {
		trigger: ["click"],
		menu: { items: menuItems },
		placement: "bottomRight"
	}, /* @__PURE__ */ React.createElement(Button$1, {
		type: "text",
		className: "saas-device-planning-workarea-item__more",
		icon: /* @__PURE__ */ React.createElement(MoreOutlined, null),
		onClick: (event) => event.stopPropagation()
	})));
};
const WorkAreaList = ({ loading, workAreas, selectedWorkAreaId, getText, translation, onCreate, onSelect, onEdit, onDelete, onSortEnd }) => {
	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
	return /* @__PURE__ */ React.createElement("aside", { className: "saas-device-planning-sider" }, /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-sider__header" }, /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-sider__title" }, getText("pisell2.saas.device-planning.work-areas")), /* @__PURE__ */ React.createElement(Button$1, {
		type: "primary",
		size: "middle",
		icon: /* @__PURE__ */ React.createElement(PlusOutlined, null),
		onClick: onCreate
	}, getText("pisell2.saas.device-planning.create"))), /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-sider__list" }, loading && !workAreas.length ? /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-sider__loading" }, /* @__PURE__ */ React.createElement(Spin, null)) : workAreas.length ? /* @__PURE__ */ React.createElement(DndContext, {
		sensors,
		collisionDetection: closestCenter,
		onDragEnd: onSortEnd
	}, /* @__PURE__ */ React.createElement(SortableContext, {
		items: workAreas.map((item) => item.id),
		strategy: verticalListSortingStrategy
	}, workAreas.map((item) => /* @__PURE__ */ React.createElement(SortableWorkAreaItem, {
		key: item.id,
		item,
		title: translation(item.name),
		selected: item.id === selectedWorkAreaId,
		getText,
		onSelect,
		onEdit,
		onDelete
	})))) : /* @__PURE__ */ React.createElement(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE })));
};
//#endregion
export { WorkAreaList as default };
