import { getText } from "../../../../locales/index.js";
import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { VENUE_WALL_STATUS_KEYS } from "./venueWallUtils.js";
import React from "react";
//#region src/components/pisellRecordBoard/shellFrame/ResourceWall/ResourceWallControlPanelColorTab.tsx
/** 控制台「外观 / 颜色」分页：占用/空闲底色与六态表格 */
const ResourceWallControlPanelColorTab = ({ adminSectionBg, adminInputBg, headerText, mutedText, divider, draftOcc, setDraftOcc, draftAvail, setDraftAvail, draftTones, setDraftTones }) => {
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("section", { className: `rounded-2xl border p-4 space-y-4 ${adminSectionBg}` }, /* @__PURE__ */ React.createElement("div", { className: `text-sm font-semibold ${headerText}` }, getText("pisell-resource-wall-tab-colors")), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-3" }, /* @__PURE__ */ React.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ React.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, getText("pisell-resource-wall-occupied-card-color-label")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("input", {
		type: "color",
		value: draftOcc,
		onChange: (e) => setDraftOcc(e.target.value),
		className: `h-10 w-14 shrink-0 rounded-lg border p-1 ${adminInputBg}`
	}), /* @__PURE__ */ React.createElement("input", {
		type: "text",
		value: draftOcc,
		onChange: (e) => setDraftOcc(e.target.value),
		className: `flex-1 rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
	}))), /* @__PURE__ */ React.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ React.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, getText("pisell-resource-wall-available-card-color-label")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("input", {
		type: "color",
		value: draftAvail,
		onChange: (e) => setDraftAvail(e.target.value),
		className: `h-10 w-14 shrink-0 rounded-lg border p-1 ${adminInputBg}`
	}), /* @__PURE__ */ React.createElement("input", {
		type: "text",
		value: draftAvail,
		onChange: (e) => setDraftAvail(e.target.value),
		className: `flex-1 rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
	}))))), /* @__PURE__ */ React.createElement("section", { className: `overflow-hidden rounded-2xl border ${adminSectionBg}` }, /* @__PURE__ */ React.createElement("div", { className: `border-b px-4 py-3 text-sm font-semibold ${headerText} ${divider}` }, getText("pisell-resource-wall-status-table-title")), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-[0.8fr_1fr_1.3fr_0.9fr_0.9fr] gap-3 border-b px-4 py-3 text-xs font-semibold text-slate-500" }, /* @__PURE__ */ React.createElement("div", null, getText("pisell-resource-wall-status-col-key")), /* @__PURE__ */ React.createElement("div", null, getText("pisell-resource-wall-status-col-label")), /* @__PURE__ */ React.createElement("div", null, getText("pisell-resource-wall-status-col-explain")), /* @__PURE__ */ React.createElement("div", null, getText("pisell-resource-wall-status-col-color")), /* @__PURE__ */ React.createElement("div", null, getText("pisell-resource-wall-status-col-notebg"))), VENUE_WALL_STATUS_KEYS.map((key) => {
		const item = draftTones[key];
		return /* @__PURE__ */ React.createElement("div", {
			key,
			className: `grid grid-cols-[0.8fr_1fr_1.3fr_0.9fr_0.9fr] items-center gap-3 border-b px-4 py-3 last:border-b-0 ${divider}`
		}, /* @__PURE__ */ React.createElement("div", { className: `text-sm font-medium ${headerText}` }, getText(`pisell-resource-wall-status-id-${key}`)), /* @__PURE__ */ React.createElement("input", {
			type: "text",
			value: item.label,
			onChange: (e) => setDraftTones((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [key]: _objectSpread2(_objectSpread2({}, prev[key]), {}, { label: e.target.value }) })),
			className: `w-full rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
		}), /* @__PURE__ */ React.createElement("textarea", {
			rows: 2,
			value: item.note,
			onChange: (e) => setDraftTones((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [key]: _objectSpread2(_objectSpread2({}, prev[key]), {}, { note: e.target.value }) })),
			className: `w-full resize-none rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
		}), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("input", {
			type: "color",
			value: item.color,
			onChange: (e) => setDraftTones((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [key]: _objectSpread2(_objectSpread2({}, prev[key]), {}, { color: e.target.value }) })),
			className: `h-10 w-14 shrink-0 rounded-lg border p-1 ${adminInputBg}`
		}), /* @__PURE__ */ React.createElement("input", {
			type: "text",
			value: item.color,
			onChange: (e) => setDraftTones((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [key]: _objectSpread2(_objectSpread2({}, prev[key]), {}, { color: e.target.value }) })),
			className: `w-full rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
		})), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("input", {
			type: "text",
			value: item.noteBg,
			onChange: (e) => setDraftTones((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [key]: _objectSpread2(_objectSpread2({}, prev[key]), {}, { noteBg: e.target.value }) })),
			className: `w-full rounded-xl border px-3 py-2 outline-none ${adminInputBg}`
		})));
	})));
};
//#endregion
export { ResourceWallControlPanelColorTab };
