const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_edgeRouting = require("../utils/edgeRouting.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let antd = require("antd");
let _ant_design_icons = require("@ant-design/icons");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./FloorMapEdgeEditPanel.less");
//#region src/components/pisellFloorMapLayout/components/FloorMapEdgeEditPanel.tsx
/**
* FloorMapEdgeEditPanel - 选中连线后的侧栏编辑
*/
const PREFIX = "pisell-floor-map-layout";
const I18N = "pisell-floor-map-layout.edge-panel";
const STATUS_OPTIONS = [
	{
		value: "online",
		labelKey: `${I18N}.status-online`
	},
	{
		value: "offline",
		labelKey: `${I18N}.status-offline`
	},
	{
		value: "warning",
		labelKey: `${I18N}.status-warning`
	},
	{
		value: "unknown",
		labelKey: `${I18N}.status-unknown`
	}
];
const ANCHOR_OPTIONS = require_edgeRouting.ANCHORS.map((a) => ({
	value: a,
	label: a
}));
function nodeLabel(config, instanceId) {
	var _config$sceneElements, _el$name;
	const el = ((_config$sceneElements = config.sceneElements) !== null && _config$sceneElements !== void 0 ? _config$sceneElements : []).find((e) => e.instanceId === instanceId);
	return (el === null || el === void 0 || (_el$name = el.name) === null || _el$name === void 0 ? void 0 : _el$name.trim()) || instanceId;
}
function FloorMapEdgeEditPanel(props) {
	var _edge$sourceAnchor, _edge$targetAnchor, _edge$sourceLabel, _edge$targetLabel, _edge$label, _edge$status, _edge$color, _edge$strokeWidth;
	const { edge, config, onUpdate, onClose, onDelete, layoutDraftDirty, className } = props;
	const t = (0, react.useCallback)((key) => _pisell_utils.locales.getText(key), []);
	const panelScrollRef = (0, react.useRef)(null);
	/** 与图元编辑面板一致：下拉挂到表单项父节点，避免侧栏 overflow 裁切 */
	const getSelectPopupContainer = (0, react.useCallback)((node) => {
		var _ref, _node$parentElement;
		return (_ref = (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : panelScrollRef.current) !== null && _ref !== void 0 ? _ref : document.body;
	}, []);
	return /* @__PURE__ */ react.default.createElement("div", {
		ref: panelScrollRef,
		className: (0, classnames.default)(`${PREFIX}-edge-edit-panel`, className)
	}, /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-edge-edit-panel-header` }, /* @__PURE__ */ react.default.createElement("span", { className: `${PREFIX}-edge-edit-panel-title` }, t(`${I18N}.title`)), /* @__PURE__ */ react.default.createElement(antd.Button, {
		type: "text",
		size: "large",
		className: `${PREFIX}-edge-edit-panel-close`,
		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.CloseOutlined, null),
		onClick: onClose,
		"aria-label": "close"
	})), layoutDraftDirty ? /* @__PURE__ */ react.default.createElement("div", { className: `${PREFIX}-edge-edit-panel-dirty-hint` }, t(`${I18N}.dirty-hint`)) : null, /* @__PURE__ */ react.default.createElement(antd.Form, {
		layout: "vertical",
		size: "large",
		className: `${PREFIX}-edge-edit-form`
	}, /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.source-node`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
		value: nodeLabel(config, edge.sourceId),
		disabled: true
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.target-node`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
		value: nodeLabel(config, edge.targetId),
		disabled: true
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.source-anchor`) }, /* @__PURE__ */ react.default.createElement(antd.Select, {
		value: (_edge$sourceAnchor = edge.sourceAnchor) !== null && _edge$sourceAnchor !== void 0 ? _edge$sourceAnchor : "right",
		options: ANCHOR_OPTIONS,
		getPopupContainer: getSelectPopupContainer,
		onChange: (v) => onUpdate({ sourceAnchor: v })
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.target-anchor`) }, /* @__PURE__ */ react.default.createElement(antd.Select, {
		value: (_edge$targetAnchor = edge.targetAnchor) !== null && _edge$targetAnchor !== void 0 ? _edge$targetAnchor : "left",
		options: ANCHOR_OPTIONS,
		getPopupContainer: getSelectPopupContainer,
		onChange: (v) => onUpdate({ targetAnchor: v })
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.source-label`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
		value: (_edge$sourceLabel = edge.sourceLabel) !== null && _edge$sourceLabel !== void 0 ? _edge$sourceLabel : "",
		onChange: (e) => onUpdate({ sourceLabel: e.target.value }),
		placeholder: "G3/WAN"
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.target-label`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
		value: (_edge$targetLabel = edge.targetLabel) !== null && _edge$targetLabel !== void 0 ? _edge$targetLabel : "",
		onChange: (e) => onUpdate({ targetLabel: e.target.value })
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.center-label`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
		value: (_edge$label = edge.label) !== null && _edge$label !== void 0 ? _edge$label : "",
		onChange: (e) => onUpdate({ label: e.target.value })
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.status`) }, /* @__PURE__ */ react.default.createElement(antd.Select, {
		value: (_edge$status = edge.status) !== null && _edge$status !== void 0 ? _edge$status : "unknown",
		options: STATUS_OPTIONS.map((o) => ({
			value: o.value,
			label: t(o.labelKey)
		})),
		getPopupContainer: getSelectPopupContainer,
		onChange: (v) => onUpdate({ status: v })
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.color`) }, /* @__PURE__ */ react.default.createElement(antd.Input, {
		value: (_edge$color = edge.color) !== null && _edge$color !== void 0 ? _edge$color : "",
		onChange: (e) => onUpdate({ color: e.target.value || void 0 }),
		placeholder: "#12B76A"
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.stroke-width`) }, /* @__PURE__ */ react.default.createElement(antd.InputNumber, {
		min: .5,
		max: 8,
		step: .5,
		value: (_edge$strokeWidth = edge.strokeWidth) !== null && _edge$strokeWidth !== void 0 ? _edge$strokeWidth : 1.5,
		onChange: (v) => onUpdate({ strokeWidth: v !== null && v !== void 0 ? v : void 0 }),
		style: { width: "100%" }
	})), /* @__PURE__ */ react.default.createElement(antd.Form.Item, { label: t(`${I18N}.dashed`) }, /* @__PURE__ */ react.default.createElement(antd.Select, {
		value: edge.dashed ? "yes" : "no",
		options: [{
			value: "no",
			label: t(`${I18N}.dashed-no`)
		}, {
			value: "yes",
			label: t(`${I18N}.dashed-yes`)
		}],
		getPopupContainer: getSelectPopupContainer,
		onChange: (v) => onUpdate({ dashed: v === "yes" })
	})), onDelete ? /* @__PURE__ */ react.default.createElement(antd.Popconfirm, {
		title: t(`${I18N}.delete-confirm`),
		onConfirm: onDelete
	}, /* @__PURE__ */ react.default.createElement(antd.Button, {
		danger: true,
		block: true,
		size: "large"
	}, t(`${I18N}.delete`))) : null));
}
//#endregion
exports.FloorMapEdgeEditPanel = FloorMapEdgeEditPanel;
