var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/pisellRecordBoard/shellFrame/ResourceWall/ResourceWallControlPanelLayoutTab.tsx
var ResourceWallControlPanelLayoutTab_exports = {};
__export(ResourceWallControlPanelLayoutTab_exports, {
  ResourceWallControlPanelLayoutTab: () => ResourceWallControlPanelLayoutTab
});
module.exports = __toCommonJS(ResourceWallControlPanelLayoutTab_exports);
var import_react = __toESM(require("react"));
var import_locales = require("../../../../locales");
var import_pisellNumber = require("../../../pisellNumber");
var import_pisellSingleSelect = require("../../../pisellSingleSelect");
var ResourceWallControlPanelLayoutTab = ({
  adminSectionBg,
  adminInputBg,
  headerText,
  mutedText,
  layoutPresets,
  draftLayoutKey,
  setDraftLayoutKey,
  draftCustomCols,
  setDraftCustomCols,
  draftCustomRows,
  setDraftCustomRows,
  draftPageSec,
  setDraftPageSec,
  draftHeroRatio,
  setDraftHeroRatio,
  carouselCur,
  carouselTot,
  isDark
}) => {
  return /* @__PURE__ */ import_react.default.createElement("section", { className: `rounded-2xl border p-4 space-y-4 ${adminSectionBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-sm font-semibold ${headerText}` }, (0, import_locales.getText)("pisell-resource-wall-tab-layout")), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3" }, /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-display-mode")), /* @__PURE__ */ import_react.default.createElement("div", { className: `w-full rounded-xl border px-3 py-2 ${adminInputBg}` }, (0, import_locales.getText)("pisell-resource-wall-carousel-paging-mode"))), /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-carousel-dwell-sec-label")), /* @__PURE__ */ import_react.default.createElement(
    import_pisellNumber.PisellNumber,
    {
      className: "w-full",
      value: draftPageSec,
      min: 3,
      max: 60,
      step: 1,
      precision: 0,
      onChange: (v) => setDraftPageSec(
        v == null ? 3 : Math.max(3, Math.min(60, Math.round(v)))
      )
    }
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: `rounded-2xl border p-3 ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-summary-pagination")), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-semibold" }, (0, import_locales.getText)("pisell-resource-wall-carousel-countdown-line").replace("{cur}", String(carouselCur)).replace("{tot}", String(carouselTot)).replace("{sec}", String(Math.max(3, draftPageSec)))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3" }, /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-layout-field-label")), /* @__PURE__ */ import_react.default.createElement(
    import_pisellSingleSelect.PisellSingleSelect,
    {
      className: "w-full",
      value: draftLayoutKey,
      options: layoutPresets.map((item) => ({
        value: item.key,
        label: item.label
      })),
      placeholder: (0, import_locales.getText)("pisell-resource-wall-layout-placeholder"),
      allowClear: false,
      onChange: (v) => {
        if (v != null) setDraftLayoutKey(String(v));
      }
    }
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-2 gap-3" }, /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-panel-custom-cols")), /* @__PURE__ */ import_react.default.createElement(
    import_pisellNumber.PisellNumber,
    {
      className: "w-full",
      value: draftCustomCols,
      min: 1,
      max: 6,
      step: 1,
      precision: 0,
      onChange: (v) => setDraftCustomCols(
        v == null ? 1 : Math.max(1, Math.min(6, Math.round(v)))
      )
    }
  )), /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-panel-custom-rows")), /* @__PURE__ */ import_react.default.createElement(
    import_pisellNumber.PisellNumber,
    {
      className: "w-full",
      value: draftCustomRows,
      min: 1,
      max: 6,
      step: 1,
      precision: 0,
      onChange: (v) => setDraftCustomRows(
        v == null ? 1 : Math.max(1, Math.min(6, Math.round(v)))
      )
    }
  )))), /* @__PURE__ */ import_react.default.createElement("label", { className: `rounded-2xl border p-3 block ${adminInputBg}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-xs mb-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-hero-width-ratio")), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement(
    "input",
    {
      type: "range",
      min: 40,
      max: 80,
      step: 1,
      value: Math.round(draftHeroRatio * 100),
      onChange: (e) => setDraftHeroRatio(Number(e.target.value) / 100),
      className: "flex-1"
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: `${isDark ? "text-slate-200" : "text-slate-700"} text-sm font-semibold w-14 text-right`
    },
    Math.round(draftHeroRatio * 100),
    "%"
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[11px] mt-2 ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-hero-width-hint"))));
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ResourceWallControlPanelLayoutTab
});
