const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
let ahooks = require("ahooks");
let _ant_design_icons = require("@ant-design/icons");
require("../../index.less");
//#region src/components/systemSettings/registry/components/OptionDataSource/OptionTable.tsx
const OptionsTable = (props) => {
	const [value, onChange] = (0, ahooks.useControllableValue)(props);
	/**
	* 更新单个选项的字段
	* @param index 选项索引
	* @param field 字段名 (label 或 value)
	* @param fieldValue 新值
	*/
	const updateOptionField = (index, field, fieldValue) => {
		onChange === null || onChange === void 0 || onChange((prev) => {
			const newOptions = [...prev];
			newOptions[index] = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (newOptions === null || newOptions === void 0 ? void 0 : newOptions[index]) || {}), {}, { [field]: fieldValue });
			return newOptions;
		});
	};
	/**
	* 添加新选项
	*/
	const handleAdd = () => {
		onChange === null || onChange === void 0 || onChange((prev) => {
			return [...prev || [], {
				id: (/* @__PURE__ */ new Date()).getTime().toString(),
				label: "",
				value: "",
				color: "default"
			}];
		});
	};
	/**
	* 删除选项
	* @param index 要删除的选项索引
	*/
	const handleRemove = (index) => {
		onChange === null || onChange === void 0 || onChange((prev) => {
			return (prev || []).filter((_, i) => i !== index);
		});
	};
	/**
	* 处理拖拽排序
	*/
	const handleSortChange = (detail) => {
		const { dataSource: newDataSource } = detail;
		const newOptions = newDataSource.map((item) => ({
			id: item.id,
			label: item.label,
			value: item.value,
			color: item.color
		}));
		onChange === null || onChange === void 0 || onChange(newOptions);
		return false;
	};
	const columns = [
		{
			title: _pisell_utils.locales.getText("registry.optionDataSource.options.label-field"),
			dataIndex: "label",
			key: "label",
			render: (_, record, index) => {
				return /* @__PURE__ */ react.default.createElement(_pisell_materials.BaseTranslation, {
					renderMode: "edit",
					type: "text",
					value: record.label,
					onChange: (value) => updateOptionField(index, "label", value),
					placeholder: _pisell_utils.locales.getText("registry.optionDataSource.options.label-placeholder"),
					inputStyle: record.label ? { borderColor: "#D0D5DD" } : {}
				});
			}
		},
		{
			title: _pisell_utils.locales.getText("registry.optionDataSource.options.value-field"),
			dataIndex: "value",
			key: "value",
			render: (_, record, index) => {
				return /* @__PURE__ */ react.default.createElement(_pisell_materials.Input, {
					value: record.value,
					onChange: (e) => updateOptionField(index, "value", e.target.value),
					placeholder: _pisell_utils.locales.getText("registry.optionDataSource.options.value-placeholder"),
					style: record.value ? { borderColor: "#D0D5DD" } : {}
				});
			}
		},
		{
			title: "",
			key: "action",
			width: 80,
			align: "center",
			render: (_, record, index) => {
				return /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
					type: "text",
					danger: true,
					size: "small",
					icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.DeleteOutlined, null),
					onClick: () => handleRemove(index)
				});
			}
		}
	];
	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "text",
		onClick: handleAdd,
		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.PlusOutlined, null),
		style: {
			position: "absolute",
			right: 0,
			top: "-36px",
			zIndex: 9
		}
	}, _pisell_utils.locales.getText("registry.optionDataSource.options.add")), /* @__PURE__ */ react.default.createElement(_pisell_materials.Table, {
		rowKey: "id",
		columns,
		dataSource: value || [],
		pagination: false,
		dragSort: true,
		virtual: false,
		tableLayout: "",
		onSortChange: handleSortChange,
		locale: { emptyText: _pisell_utils.locales.getText("registry.optionDataSource.options.empty") }
	}));
};
//#endregion
exports.default = OptionsTable;
