import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import React from "react";
import { locales } from "@pisell/utils";
import { BaseTranslation, Button, Input, Table } from "@pisell/materials";
import { useControllableValue } from "ahooks";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import "../../index.less";
//#region src/components/systemSettings/registry/components/OptionDataSource/OptionTable.tsx
const OptionsTable = (props) => {
	const [value, onChange] = 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] = _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: locales.getText("registry.optionDataSource.options.label-field"),
			dataIndex: "label",
			key: "label",
			render: (_, record, index) => {
				return /* @__PURE__ */ React.createElement(BaseTranslation, {
					renderMode: "edit",
					type: "text",
					value: record.label,
					onChange: (value) => updateOptionField(index, "label", value),
					placeholder: locales.getText("registry.optionDataSource.options.label-placeholder"),
					inputStyle: record.label ? { borderColor: "#D0D5DD" } : {}
				});
			}
		},
		{
			title: locales.getText("registry.optionDataSource.options.value-field"),
			dataIndex: "value",
			key: "value",
			render: (_, record, index) => {
				return /* @__PURE__ */ React.createElement(Input, {
					value: record.value,
					onChange: (e) => updateOptionField(index, "value", e.target.value),
					placeholder: 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.createElement(Button, {
					type: "text",
					danger: true,
					size: "small",
					icon: /* @__PURE__ */ React.createElement(DeleteOutlined, null),
					onClick: () => handleRemove(index)
				});
			}
		}
	];
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
		type: "text",
		onClick: handleAdd,
		icon: /* @__PURE__ */ React.createElement(PlusOutlined, null),
		style: {
			position: "absolute",
			right: 0,
			top: "-36px",
			zIndex: 9
		}
	}, locales.getText("registry.optionDataSource.options.add")), /* @__PURE__ */ React.createElement(Table, {
		rowKey: "id",
		columns,
		dataSource: value || [],
		pagination: false,
		dragSort: true,
		virtual: false,
		tableLayout: "",
		onSortChange: handleSortChange,
		locale: { emptyText: locales.getText("registry.optionDataSource.options.empty") }
	}));
};
//#endregion
export { OptionsTable as default };
