import React from 'react';
import { getText } from "../../../../locales";
import { PisellNumber } from "../../../pisellNumber";
import { PisellSingleSelect } from "../../../pisellSingleSelect";
/** 控制台「资源 / 布局」分页：预设、自定义行列、翻页停留、主文案宽度 */
export var ResourceWallControlPanelLayoutTab = function ResourceWallControlPanelLayoutTab(_ref) {
  var adminSectionBg = _ref.adminSectionBg,
    adminInputBg = _ref.adminInputBg,
    headerText = _ref.headerText,
    mutedText = _ref.mutedText,
    layoutPresets = _ref.layoutPresets,
    draftLayoutKey = _ref.draftLayoutKey,
    setDraftLayoutKey = _ref.setDraftLayoutKey,
    draftCustomCols = _ref.draftCustomCols,
    setDraftCustomCols = _ref.setDraftCustomCols,
    draftCustomRows = _ref.draftCustomRows,
    setDraftCustomRows = _ref.setDraftCustomRows,
    draftPageSec = _ref.draftPageSec,
    setDraftPageSec = _ref.setDraftPageSec,
    draftHeroRatio = _ref.draftHeroRatio,
    setDraftHeroRatio = _ref.setDraftHeroRatio,
    carouselCur = _ref.carouselCur,
    carouselTot = _ref.carouselTot,
    isDark = _ref.isDark;
  return /*#__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-layout')), /*#__PURE__*/React.createElement("div", {
    className: "grid grid-cols-1 md:grid-cols-3 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-display-mode')), /*#__PURE__*/React.createElement("div", {
    className: "w-full rounded-xl border px-3 py-2 ".concat(adminInputBg)
  }, getText('pisell-resource-wall-carousel-paging-mode'))), /*#__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-carousel-dwell-sec-label')), /*#__PURE__*/React.createElement(PisellNumber, {
    className: "w-full",
    value: draftPageSec,
    min: 3,
    max: 60,
    step: 1,
    precision: 0,
    onChange: function onChange(v) {
      return setDraftPageSec(v == null ? 3 : Math.max(3, Math.min(60, Math.round(v))));
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: "rounded-2xl border p-3 ".concat(adminInputBg)
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-xs mb-2 ".concat(mutedText)
  }, getText('pisell-resource-wall-summary-pagination')), /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-semibold"
  }, getText('pisell-resource-wall-carousel-countdown-line').replace('{cur}', String(carouselCur)).replace('{tot}', String(carouselTot)).replace('{sec}', String(Math.max(3, draftPageSec)))))), /*#__PURE__*/React.createElement("div", {
    className: "grid grid-cols-1 md: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-layout-field-label')), /*#__PURE__*/React.createElement(PisellSingleSelect, {
    className: "w-full",
    value: draftLayoutKey,
    options: layoutPresets.map(function (item) {
      return {
        value: item.key,
        label: item.label
      };
    }),
    placeholder: getText('pisell-resource-wall-layout-placeholder'),
    allowClear: false,
    onChange: function onChange(v) {
      if (v != null) setDraftLayoutKey(String(v));
    }
  })), /*#__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-panel-custom-cols')), /*#__PURE__*/React.createElement(PisellNumber, {
    className: "w-full",
    value: draftCustomCols,
    min: 1,
    max: 6,
    step: 1,
    precision: 0,
    onChange: function onChange(v) {
      return setDraftCustomCols(v == null ? 1 : Math.max(1, Math.min(6, Math.round(v))));
    }
  })), /*#__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-panel-custom-rows')), /*#__PURE__*/React.createElement(PisellNumber, {
    className: "w-full",
    value: draftCustomRows,
    min: 1,
    max: 6,
    step: 1,
    precision: 0,
    onChange: function onChange(v) {
      return setDraftCustomRows(v == null ? 1 : Math.max(1, Math.min(6, Math.round(v))));
    }
  })))), /*#__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-hero-width-ratio')), /*#__PURE__*/React.createElement("div", {
    className: "flex items-center gap-3"
  }, /*#__PURE__*/React.createElement("input", {
    type: "range",
    min: 40,
    max: 80,
    step: 1,
    value: Math.round(draftHeroRatio * 100),
    onChange: function onChange(e) {
      return setDraftHeroRatio(Number(e.target.value) / 100);
    },
    className: "flex-1"
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(isDark ? 'text-slate-200' : 'text-slate-700', " text-sm font-semibold w-14 text-right")
  }, Math.round(draftHeroRatio * 100), "%")), /*#__PURE__*/React.createElement("div", {
    className: "text-[11px] mt-2 ".concat(mutedText)
  }, getText('pisell-resource-wall-hero-width-hint'))));
};