import { ADD_BUTTON_KEY, SEARCH_PLACEHOLDER_KEY } from "../../constants.js";
import React, { useMemo } from "react";
import { Button, Icon, Input, Select, Table, Tag } from "@pisell/materials";
import classNames from "classnames";
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/saasDevice/devicePlanning/components/DeviceTable/index.tsx
const DeviceTable = ({ activeKind, data, loading, search, typeFilter, typeOptions, page, pageSize, getText, onSearchChange, onTypeFilterChange, onPageChange, onAdd, onSortChange, onRowClick }) => {
	const columns = useMemo(() => [
		{
			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(Icon, { type: record._raw.type.icon }) : null, name);
			}
		},
		{
			title: getText("pisell2.saas.device-planning.column.device-type"),
			dataIndex: "typeName",
			key: "typeName"
		},
		{
			title: getText("pisell2.saas.device-planning.column.device-model"),
			dataIndex: "modelName",
			key: "modelName"
		},
		{
			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(Tag, { color: value === "linked" ? "green" : "gold" }, getText(`pisell2.saas.device-planning.status.${value}`) || value)
		},
		{
			title: getText("pisell2.saas.device-planning.column.online-status"),
			dataIndex: "status",
			key: "status",
			width: 140,
			render: (value) => /* @__PURE__ */ React.createElement("span", { className: "saas-device-planning-device-table__online-status" }, /* @__PURE__ */ React.createElement("span", { className: classNames("saas-device-planning-device-table__status-dot", { "is-online": value === "online" }) }), getText(`pisell2.saas.device-planning.status.${value}`) || value)
		}
	], [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, {
		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, {
		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, {
		allowClear: true,
		value: typeFilter,
		placeholder: getText("pisell2.saas.device-planning.all-types"),
		options: typeOptions,
		onChange: (value) => onTypeFilterChange(value),
		style: { width: 200 }
	})), /* @__PURE__ */ React.createElement(Button, {
		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, {
		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,
			onChange: (value) => {
				onPageChange(value.page || 1, value.size || pageSize);
			}
		},
		showTitle: false,
		showSubTitle: false,
		locale: { emptyText: emptyContent },
		bordered: false
	})));
};
//#endregion
export { DeviceTable as default };
