const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
let _ant_design_icons = require("@ant-design/icons");
require("./index.less");
//#region src/plus/webPosLogin/components/SelectDevice/index.tsx
/** 默认设备图标 */
const DeviceIcon = () => /* @__PURE__ */ react.default.createElement("svg", {
	width: "24",
	height: "24",
	viewBox: "0 0 24 24",
	fill: "none",
	xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ react.default.createElement("rect", {
	x: "4",
	y: "3",
	width: "16",
	height: "18",
	rx: "2",
	stroke: "currentColor",
	strokeWidth: "2"
}), /* @__PURE__ */ react.default.createElement("line", {
	x1: "4",
	y1: "7",
	x2: "20",
	y2: "7",
	stroke: "currentColor",
	strokeWidth: "2"
}), /* @__PURE__ */ react.default.createElement("line", {
	x1: "4",
	y1: "17",
	x2: "20",
	y2: "17",
	stroke: "currentColor",
	strokeWidth: "2"
}), /* @__PURE__ */ react.default.createElement("circle", {
	cx: "12",
	cy: "19.5",
	r: "0.5",
	fill: "currentColor"
}));
/**
* 模糊搜索匹配
* @param device 设备数据
* @param keyword 搜索关键词
*/
const matchDevice = (device, keyword) => {
	if (!keyword.trim()) return true;
	const lowerKeyword = keyword.toLowerCase();
	return [
		device === null || device === void 0 ? void 0 : device.name,
		device === null || device === void 0 ? void 0 : device.description,
		device === null || device === void 0 ? void 0 : device.number
	].filter(Boolean).some((field) => field === null || field === void 0 ? void 0 : field.toLowerCase().includes(lowerKeyword));
};
/**
* 获取确认弹窗文本
* @param device 设备数据
*/
const getConfirmText = (device) => {
	var _device$client;
	const deviceName = (device === null || device === void 0 ? void 0 : device.name) || "";
	const clientName = (device === null || device === void 0 || (_device$client = device.client) === null || _device$client === void 0 ? void 0 : _device$client.name) || "";
	return _pisell_utils.locales.getText("webpos-login-device-takeover-confirm")(deviceName, clientName);
};
/**
* SelectDevice 设备选择组件
* @description 展示设备列表，支持搜索过滤和选择，已被使用的设备需确认后选择
*/
const SelectDevice = (0, react.memo)((props) => {
	const { deviceList = [], locale = "en", loading = false, lastUsedDeviceId, onSelect, confirmOkText, confirmCancelText } = props;
	/** 搜索关键词 */
	const [searchKeyword, setSearchKeyword] = (0, react.useState)("");
	/** 当前选中的设备ID（用于显示点击loading） */
	const [selectingId, setSelectingId] = (0, react.useState)(null);
	/** 确认弹窗状态 */
	const [confirmVisible, setConfirmVisible] = (0, react.useState)(false);
	/** 待确认的设备 */
	const [pendingDevice, setPendingDevice] = (0, react.useState)(null);
	/**
	* 过滤后的设备列表
	*/
	const filteredDeviceList = (0, react.useMemo)(() => {
		if (!searchKeyword.trim()) return deviceList;
		return deviceList.filter((device) => matchDevice(device, searchKeyword));
	}, [deviceList, searchKeyword]);
	/**
	* 处理搜索输入
	*/
	const handleSearchChange = (0, react.useCallback)((e) => {
		setSearchKeyword(e.target.value);
	}, []);
	/**
	* 处理设备选择
	*/
	const handleSelectDevice = (0, react.useCallback)((device) => {
		if (selectingId) return;
		if (device.client) {
			setPendingDevice(device);
			setConfirmVisible(true);
			return;
		}
		setSelectingId(device.id);
		onSelect === null || onSelect === void 0 || onSelect(device);
	}, [selectingId, onSelect]);
	/**
	* 确认接管设备
	*/
	const handleConfirmSelect = (0, react.useCallback)(() => {
		if (!pendingDevice) return;
		setConfirmVisible(false);
		setSelectingId(pendingDevice.id);
		onSelect === null || onSelect === void 0 || onSelect(pendingDevice);
		setPendingDevice(null);
	}, [pendingDevice, onSelect]);
	/**
	* 取消确认
	*/
	const handleCancelConfirm = (0, react.useCallback)(() => {
		setConfirmVisible(false);
		setPendingDevice(null);
	}, []);
	/**
	* 获取按钮文本
	*/
	const okText = confirmOkText || _pisell_utils.locales.getText("webpos-login-device-takeover-confirm-ok");
	const cancelText = confirmCancelText || _pisell_utils.locales.getText("webpos-login-device-takeover-confirm-cancel");
	/**
	* 渲染设备列表项
	*/
	const renderDeviceItem = (device) => {
		const isLastUsed = lastUsedDeviceId === device.id;
		const isSelecting = selectingId === device.id;
		return /* @__PURE__ */ react.default.createElement("div", {
			key: device.id,
			className: `select-device__item ${isSelecting ? "select-device__item--selecting" : ""}`,
			onClick: () => handleSelectDevice(device)
		}, /* @__PURE__ */ react.default.createElement("div", { className: "select-device__item-icon" }, /* @__PURE__ */ react.default.createElement(DeviceIcon, null)), /* @__PURE__ */ react.default.createElement("div", { className: "select-device__item-content" }, /* @__PURE__ */ react.default.createElement("span", { className: "select-device__item-name" }, device.name), device.description && /* @__PURE__ */ react.default.createElement("span", { className: "select-device__item-desc" }, device.description)), /* @__PURE__ */ react.default.createElement("div", { className: "select-device__item-extra" }, isSelecting ? /* @__PURE__ */ react.default.createElement(antd.Spin, { size: "small" }) : isLastUsed ? /* @__PURE__ */ react.default.createElement("span", { className: "select-device__item-tag" }, _pisell_utils.locales.getText("webpos-login-last-used")) : null));
	};
	return /* @__PURE__ */ react.default.createElement("div", { className: "select-device" }, /* @__PURE__ */ react.default.createElement("div", { className: "select-device__search" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellInput, {
		placeholder: _pisell_utils.locales.getText("webpos-login-search"),
		prefix: /* @__PURE__ */ react.default.createElement(_ant_design_icons.SearchOutlined, { style: { color: "#999" } }),
		value: searchKeyword,
		onChange: handleSearchChange,
		allowClear: true,
		size: "large"
	})), /* @__PURE__ */ react.default.createElement("div", { className: "select-device__list" }, loading ? /* @__PURE__ */ react.default.createElement("div", { className: "select-device__loading" }, /* @__PURE__ */ react.default.createElement(antd.Spin, { size: "large" })) : filteredDeviceList.length === 0 ? /* @__PURE__ */ react.default.createElement("div", { className: "select-device__empty" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellEmpty, { description: _pisell_utils.locales.getText("webpos-login-select-device-empty") })) : filteredDeviceList.map(renderDeviceItem)), /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal.Information, {
		title: "",
		describe: pendingDevice ? getConfirmText(pendingDevice) : "",
		open: confirmVisible,
		okText,
		cancelText,
		okVisible: true,
		cancelVisible: true,
		closable: true,
		footerDivider: true,
		destroyOnClose: true,
		onOk: handleConfirmSelect,
		onCancel: handleCancelConfirm
	}));
});
SelectDevice.displayName = "SelectDevice";
//#endregion
exports.default = SelectDevice;
