function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from 'react';
import { getText } from "../../../../locales";
import { VENUE_WALL_STATUS_KEYS } from "./venueWallUtils";
/** 控制台「外观 / 颜色」分页：占用/空闲底色与六态表格 */
export var ResourceWallControlPanelColorTab = function ResourceWallControlPanelColorTab(_ref) {
  var adminSectionBg = _ref.adminSectionBg,
    adminInputBg = _ref.adminInputBg,
    headerText = _ref.headerText,
    mutedText = _ref.mutedText,
    divider = _ref.divider,
    draftOcc = _ref.draftOcc,
    setDraftOcc = _ref.setDraftOcc,
    draftAvail = _ref.draftAvail,
    setDraftAvail = _ref.setDraftAvail,
    draftTones = _ref.draftTones,
    setDraftTones = _ref.setDraftTones;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
    className: "rounded-2xl border p-4 space-y-4 ".concat(adminSectionBg)
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-semibold ".concat(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 ".concat(adminInputBg)
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-xs mb-2 ".concat(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: function onChange(e) {
      return setDraftOcc(e.target.value);
    },
    className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
  }), /*#__PURE__*/React.createElement("input", {
    type: "text",
    value: draftOcc,
    onChange: function onChange(e) {
      return setDraftOcc(e.target.value);
    },
    className: "flex-1 rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
  }))), /*#__PURE__*/React.createElement("label", {
    className: "rounded-2xl border p-3 block ".concat(adminInputBg)
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-xs mb-2 ".concat(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: function onChange(e) {
      return setDraftAvail(e.target.value);
    },
    className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
  }), /*#__PURE__*/React.createElement("input", {
    type: "text",
    value: draftAvail,
    onChange: function onChange(e) {
      return setDraftAvail(e.target.value);
    },
    className: "flex-1 rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
  }))))), /*#__PURE__*/React.createElement("section", {
    className: "overflow-hidden rounded-2xl border ".concat(adminSectionBg)
  }, /*#__PURE__*/React.createElement("div", {
    className: "border-b px-4 py-3 text-sm font-semibold ".concat(headerText, " ").concat(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(function (key) {
    var item = draftTones[key];
    return /*#__PURE__*/React.createElement("div", {
      key: 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 ".concat(divider)
    }, /*#__PURE__*/React.createElement("div", {
      className: "text-sm font-medium ".concat(headerText)
    }, getText("pisell-resource-wall-status-id-".concat(key))), /*#__PURE__*/React.createElement("input", {
      type: "text",
      value: item.label,
      onChange: function onChange(e) {
        return setDraftTones(function (prev) {
          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
            label: e.target.value
          })));
        });
      },
      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
    }), /*#__PURE__*/React.createElement("textarea", {
      rows: 2,
      value: item.note,
      onChange: function onChange(e) {
        return setDraftTones(function (prev) {
          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
            note: e.target.value
          })));
        });
      },
      className: "w-full resize-none rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
    }), /*#__PURE__*/React.createElement("div", {
      className: "flex items-center gap-2"
    }, /*#__PURE__*/React.createElement("input", {
      type: "color",
      value: item.color,
      onChange: function onChange(e) {
        return setDraftTones(function (prev) {
          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
            color: e.target.value
          })));
        });
      },
      className: "h-10 w-14 shrink-0 rounded-lg border p-1 ".concat(adminInputBg)
    }), /*#__PURE__*/React.createElement("input", {
      type: "text",
      value: item.color,
      onChange: function onChange(e) {
        return setDraftTones(function (prev) {
          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
            color: e.target.value
          })));
        });
      },
      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
    })), /*#__PURE__*/React.createElement("div", {
      className: "flex items-center gap-2"
    }, /*#__PURE__*/React.createElement("input", {
      type: "text",
      value: item.noteBg,
      onChange: function onChange(e) {
        return setDraftTones(function (prev) {
          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, _objectSpread(_objectSpread({}, prev[key]), {}, {
            noteBg: e.target.value
          })));
        });
      },
      className: "w-full rounded-xl border px-3 py-2 outline-none ".concat(adminInputBg)
    })));
  })));
};