const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_utils = require("../../utils.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_materials = require("@pisell/materials");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let _ant_design_icons = require("@ant-design/icons");
//#region src/plus/saasDevice/appPeripheral/components/connectDeviceModal/PickExistingDeviceStep.tsx
const PickExistingDeviceStep = ({ workAreas, selectedWorkAreaId, currentWorkAreaId, filteredDevices, connectedDeviceIds, loading, pickingDeviceId, keyword, targetKind, getText, translation, getWorkAreaDeviceCount, getDeviceCountText, isPhone, onWorkAreaChange, onKeywordChange, onPickDevice }) => {
	var _workAreas$find;
	const [workAreaPickerOpen, setWorkAreaPickerOpen] = (0, react.useState)(false);
	const selectedWorkArea = workAreas.find((area) => area.id === selectedWorkAreaId);
	const renderWorkAreaList = (closeAfterSelect = false) => /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__area-list" }, workAreas.map((area) => /* @__PURE__ */ react.default.createElement("div", {
		key: area.id,
		role: "button",
		tabIndex: 0,
		className: `saas-app-peripheral-connect__area${selectedWorkAreaId === area.id ? " is-active" : ""}`,
		onClick: () => {
			onWorkAreaChange(area.id);
			if (closeAfterSelect) setWorkAreaPickerOpen(false);
		}
	}, /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__area-header" }, /* @__PURE__ */ react.default.createElement("strong", null, translation(area.name) || area.id), area.id === currentWorkAreaId ? /* @__PURE__ */ react.default.createElement("span", { className: "saas-app-peripheral-connect__current" }, getText("pisell2.saas.device-planning.connect.current")) : null), /* @__PURE__ */ react.default.createElement("span", null, getDeviceCountText(getWorkAreaDeviceCount(area))))));
	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__areas" }, /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__section-title" }, getText("pisell2.saas.device-planning.connect.work-areas")), /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__section-desc" }, getText("pisell2.saas.device-planning.connect.select-area")), isPhone ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: "saas-app-peripheral-connect__workarea-trigger",
		onClick: () => setWorkAreaPickerOpen(true)
	}, /* @__PURE__ */ react.default.createElement("span", null, translation(selectedWorkArea === null || selectedWorkArea === void 0 ? void 0 : selectedWorkArea.name) || (selectedWorkArea === null || selectedWorkArea === void 0 ? void 0 : selectedWorkArea.id) || "-"), /* @__PURE__ */ react.default.createElement(_ant_design_icons.DownOutlined, null)), /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		open: workAreaPickerOpen,
		title: getText("pisell2.saas.device-planning.connect.work-areas"),
		footer: null,
		width: "100%",
		platform: "h5",
		mobileModalHeight: "auto",
		className: "saas-app-peripheral-workarea-picker-modal",
		onCancel: () => setWorkAreaPickerOpen(false),
		bodyStyle: { padding: "24px 10px 24px 24px" }
	}, renderWorkAreaList(true))) : renderWorkAreaList()), /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__targets" }, /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__workarea-name" }, translation((_workAreas$find = workAreas.find((area) => area.id === selectedWorkAreaId)) === null || _workAreas$find === void 0 ? void 0 : _workAreas$find.name)), /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__filters" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Input, {
		allowClear: true,
		prefix: /* @__PURE__ */ react.default.createElement(_ant_design_icons.SearchOutlined, null),
		value: keyword,
		placeholder: getText("pisell2.saas.device-planning.connect.search"),
		onChange: (event) => onKeywordChange(event.target.value)
	})), /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__device-list" }, /* @__PURE__ */ react.default.createElement(antd.Spin, { spinning: loading || Boolean(pickingDeviceId) }, /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__device-grid" }, filteredDevices.map((device) => {
		var _device$type, _device$type2;
		const disabled = connectedDeviceIds.includes(device.id);
		return /* @__PURE__ */ react.default.createElement("div", {
			key: device.id,
			role: "button",
			tabIndex: disabled || pickingDeviceId ? -1 : 0,
			"aria-disabled": disabled || Boolean(pickingDeviceId),
			className: (0, classnames.default)("saas-app-peripheral-connect__device-card", { "is-disabled": disabled || Boolean(pickingDeviceId) }),
			onClick: () => {
				if (!disabled && !pickingDeviceId) onPickDevice(device);
			}
		}, /* @__PURE__ */ react.default.createElement("span", { className: `saas-app-peripheral-connect__device-icon is-${device.type_kind}` }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Icon, {
			type: ((_device$type = device.type) === null || _device$type === void 0 ? void 0 : _device$type.icon) || "DesktopOutlined",
			color: require_utils.DEVICE_ICON_COLOR[device.type_kind]
		})), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("strong", null, translation(device.name) || device.id), /* @__PURE__ */ react.default.createElement("span", null, translation((_device$type2 = device.type) === null || _device$type2 === void 0 ? void 0 : _device$type2.name) || device.type_code)));
	})), !filteredDevices.length ? /* @__PURE__ */ react.default.createElement("div", { className: "saas-app-peripheral-connect__empty" }, /* @__PURE__ */ react.default.createElement(antd.Empty, {
		image: antd.Empty.PRESENTED_IMAGE_SIMPLE,
		description: getText(targetKind === "smart" ? "pisell2.saas.device-planning.connect.no-smart" : "pisell2.saas.device-planning.connect.no-peripherals")
	})) : null))));
};
//#endregion
exports.default = PickExistingDeviceStep;
