import { DEVICE_ICON_COLOR } from "../../../../utils.js";
import React from "react";
import { Empty, Spin } from "antd";
import { Icon, Input as Input$1 } from "@pisell/materials";
import classNames from "classnames";
import { SearchOutlined } from "@ant-design/icons";
//#region src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/connectDeviceModal/PickExistingDeviceStep.tsx
const PickExistingDeviceStep = ({ workAreas, selectedWorkAreaId, currentWorkAreaId, filteredDevices, connectedDeviceIds, loading, pickingDeviceId, keyword, targetKind, getText, translation, getWorkAreaDeviceCount, getDeviceCountText, onWorkAreaChange, onKeywordChange, onPickDevice }) => {
	var _workAreas$find;
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-areas" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-section-title" }, getText("pisell2.saas.device-planning.connect.work-areas")), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-section-desc" }, getText("pisell2.saas.device-planning.connect.select-area")), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-area-list" }, workAreas.map((area) => /* @__PURE__ */ React.createElement("div", {
		key: area.id,
		role: "button",
		tabIndex: 0,
		className: `device-detail-drawer__connect-area${selectedWorkAreaId === area.id ? " is-active" : ""}`,
		onClick: () => onWorkAreaChange(area.id)
	}, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-area-header" }, /* @__PURE__ */ React.createElement("strong", null, translation(area.name) || area.id), area.id === currentWorkAreaId ? /* @__PURE__ */ React.createElement("span", { className: "device-detail-drawer__connect-current" }, getText("pisell2.saas.device-planning.connect.current")) : null), /* @__PURE__ */ React.createElement("span", null, getDeviceCountText(getWorkAreaDeviceCount(area))))))), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-targets" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-workarea-name" }, translation((_workAreas$find = workAreas.find((area) => area.id === selectedWorkAreaId)) === null || _workAreas$find === void 0 ? void 0 : _workAreas$find.name)), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-filters" }, /* @__PURE__ */ React.createElement(Input$1, {
		allowClear: true,
		prefix: /* @__PURE__ */ React.createElement(SearchOutlined, null),
		value: keyword,
		placeholder: getText("pisell2.saas.device-planning.connect.search"),
		onChange: (event) => onKeywordChange(event.target.value)
	})), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-device-list" }, /* @__PURE__ */ React.createElement(Spin, { spinning: loading || Boolean(pickingDeviceId) }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-device-grid" }, filteredDevices.map((device) => {
		var _device$type, _device$type2;
		const disabled = connectedDeviceIds.includes(device.id);
		return /* @__PURE__ */ React.createElement("div", {
			key: device.id,
			role: "button",
			tabIndex: disabled || pickingDeviceId ? -1 : 0,
			"aria-disabled": disabled || Boolean(pickingDeviceId),
			className: classNames("device-detail-drawer__connect-device-card", { "is-disabled": disabled || Boolean(pickingDeviceId) }),
			onClick: () => {
				if (!disabled && !pickingDeviceId) onPickDevice(device);
			}
		}, /* @__PURE__ */ React.createElement("span", { className: `device-detail-drawer__connect-device-icon is-${device.type_kind}` }, /* @__PURE__ */ React.createElement(Icon, {
			type: ((_device$type = device.type) === null || _device$type === void 0 ? void 0 : _device$type.icon) || "DesktopOutlined",
			color: DEVICE_ICON_COLOR[device.type_kind]
		})), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("strong", null, translation(device.name) || device.id), /* @__PURE__ */ React.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.createElement("div", { className: "device-detail-drawer__connect-empty" }, /* @__PURE__ */ React.createElement(Empty, {
		image: Empty.PRESENTED_IMAGE_SIMPLE,
		description: getText(targetKind === "smart" ? "pisell2.saas.device-planning.connect.no-smart" : "pisell2.saas.device-planning.connect.no-peripherals")
	})) : null))));
};
//#endregion
export { PickExistingDeviceStep as default };
