import { ADD_BUTTON_KEY, SEARCH_PLACEHOLDER_KEY } from "../../../../model/constants.js";
import LinkStatusTag from "../../../../components/shared/LinkStatusTag.js";
import OnlineStatus from "../../../../components/shared/OnlineStatus.js";
import DeviceIcon from "../../../../components/shared/DeviceIcon.js";
import React, { useMemo } from "react";
import { Tag } from "antd";
import { Button as Button$1, Icon, Input as Input$1, Select as Select$1, Table as Table$1 } from "@pisell/materials";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/saasDevice/devicePlanning/modules/devices/components/DeviceTable/index.tsx
const STRUCTURE_TAG_COLOR = {
	composite: "blue",
	component: "purple"
};
const DeviceTable = ({ activeKind, data, loading, search, typeFilter, structureFilter, typeOptions, structureOptions, page, pageSize, getText, onSearchChange, onTypeFilterChange, onStructureFilterChange, onPageChange, onAdd, onSortChange, onRowClick }) => {
	const columns = useMemo(() => {
		const nameColumn = {
			title: getText("pisell2.saas.device-planning.column.name"),
			dataIndex: "name",
			key: "name",
			render: (name, record) => {
				var _record$_raw$type;
				return /* @__PURE__ */ React.createElement("span", { className: "saas-device-planning-device-table__device-name" }, ((_record$_raw$type = record._raw.type) === null || _record$_raw$type === void 0 ? void 0 : _record$_raw$type.icon) ? /* @__PURE__ */ React.createElement(DeviceIcon, {
					className: "saas-device-planning-device-table__device-icon",
					icon: record._raw.type.icon,
					kind: record._raw.type_kind
				}) : null, name);
			}
		};
		const typeColumn = {
			title: getText("pisell2.saas.device-planning.column.device-type"),
			dataIndex: "typeName",
			key: "typeName"
		};
		const modelColumn = {
			title: getText("pisell2.saas.device-planning.column.device-model"),
			dataIndex: "modelName",
			key: "modelName"
		};
		const structureColumn = {
			title: getText("pisell2.saas.device-planning.column.structure"),
			dataIndex: "structure",
			key: "structure",
			width: 120,
			render: (value) => value ? /* @__PURE__ */ React.createElement(Tag, { color: STRUCTURE_TAG_COLOR[value] }, getText(`pisell2.saas.device-planning.structure.${value}`)) : "-"
		};
		if (activeKind === "dumb") return [
			nameColumn,
			typeColumn,
			modelColumn,
			structureColumn
		];
		return [
			nameColumn,
			typeColumn,
			modelColumn,
			structureColumn,
			{
				title: getText("pisell2.saas.device-planning.column.profile"),
				dataIndex: "profileName",
				key: "profileName"
			},
			{
				title: getText("pisell2.saas.device-planning.column.link-status"),
				dataIndex: "link",
				key: "link",
				width: 140,
				render: (value) => /* @__PURE__ */ React.createElement(LinkStatusTag, {
					value,
					getText
				})
			},
			{
				title: getText("pisell2.saas.device-planning.column.online-status"),
				dataIndex: "status",
				key: "status",
				width: 140,
				render: (value) => /* @__PURE__ */ React.createElement(OnlineStatus, {
					value,
					getText,
					className: "saas-device-planning-device-table__online-status",
					dotClassName: "saas-device-planning-device-table__status-dot"
				})
			}
		];
	}, [activeKind, getText]);
	const pagedData = useMemo(() => {
		const start = (page - 1) * pageSize;
		return data.slice(start, start + pageSize);
	}, [
		data,
		page,
		pageSize
	]);
	const handleSortChange = (detail) => {
		const sortedPageData = (detail === null || detail === void 0 ? void 0 : detail.dataSource) || [];
		const start = (page - 1) * pageSize;
		const nextData = [...data];
		nextData.splice(start, sortedPageData.length, ...sortedPageData);
		onSortChange(nextData);
		return false;
	};
	const emptyContent = /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-device-table__empty" }, /* @__PURE__ */ React.createElement(Icon, { type: "SettingOutlined" }), /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-device-table__empty-title" }, getText(`pisell2.saas.device-planning.empty.${activeKind}.title`)), /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-device-table__empty-desc" }, getText(`pisell2.saas.device-planning.empty.${activeKind}.desc`)), /* @__PURE__ */ React.createElement(Button$1, {
		type: "primary",
		icon: /* @__PURE__ */ React.createElement(PlusOutlined, null),
		className: "saas-device-planning-device-table__empty-button",
		onClick: onAdd
	}, getText(ADD_BUTTON_KEY[activeKind])));
	return /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-device-table" }, /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-device-table__toolbar" }, /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-device-table__filters" }, /* @__PURE__ */ React.createElement(Input$1, {
		allowClear: true,
		prefix: /* @__PURE__ */ React.createElement(SearchOutlined, null),
		value: search,
		placeholder: getText(SEARCH_PLACEHOLDER_KEY[activeKind]),
		onChange: (event) => onSearchChange(event.target.value),
		style: { width: 260 }
	}), /* @__PURE__ */ React.createElement(Select$1, {
		allowClear: true,
		value: typeFilter,
		placeholder: getText("pisell2.saas.device-planning.all-types"),
		options: typeOptions,
		onChange: (value) => onTypeFilterChange(value),
		style: { width: 200 }
	}), /* @__PURE__ */ React.createElement(Select$1, {
		allowClear: true,
		value: structureFilter,
		placeholder: getText("pisell2.saas.device-planning.all-structures"),
		options: structureOptions.map((option) => ({
			label: getText(option.labelKey),
			value: option.value
		})),
		onChange: (value) => onStructureFilterChange(value),
		style: { width: 160 }
	})), /* @__PURE__ */ React.createElement(Button$1, {
		type: "primary",
		icon: /* @__PURE__ */ React.createElement(PlusOutlined, null),
		className: "saas-device-planning-device-table__add-button",
		onClick: onAdd
	}, getText(ADD_BUTTON_KEY[activeKind]))), /* @__PURE__ */ React.createElement("div", { className: "saas-device-planning-device-table__table" }, /* @__PURE__ */ React.createElement(Table$1, {
		key: activeKind,
		rowKey: "id",
		dataSource: pagedData,
		columns,
		rowClassName: "saas-device-planning-device-table__row",
		loading,
		dragSort: data.length > 1,
		virtual: false,
		onSortChange: handleSortChange,
		onRow: (record) => ({ onClick: () => onRowClick(record) }),
		scroll: {
			autoCalc: true,
			scrollToFirstRowOnChange: true
		},
		pagination: {
			localPagination: false,
			current: page,
			pageSize,
			total: data.length,
			showSizeChanger: true,
			showPagination: true,
			onChange: (value) => {
				const nextPageSize = value.size || pageSize;
				onPageChange(nextPageSize !== pageSize ? 1 : value.page || 1, nextPageSize);
			}
		},
		showTitle: false,
		showSubTitle: false,
		locale: { emptyText: emptyContent },
		bordered: false
	})));
};
//#endregion
export { DeviceTable as default };
