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/pro/skuDetailModal/components/weighing/TareManagementPanel.tsx
var TareManagementPanel_exports = {};
__export(TareManagementPanel_exports, {
  TareManagementPanel: () => TareManagementPanel,
  TareQuickBar: () => TareQuickBar
});
module.exports = __toCommonJS(TareManagementPanel_exports);
var import_react = __toESM(require("react"));
var import_materials = require("@pisell/materials");
var import_keyboards = require("../../../keyboards");
var import_utils = require("./utils");
function TareQuickBar({
  options,
  selected,
  compact,
  unitLabel,
  convertTareValue,
  onSelect
}) {
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: `pisell-sku-detail-weighing__tare-quick-bar${compact ? " pisell-sku-detail-weighing__tare-quick-bar--compact" : " pisell-sku-detail-weighing__tare-quick-bar--expanded"}`
    },
    options.map((opt) => {
      const active = opt.id === selected;
      const displayValue = convertTareValue(opt);
      const showValue = !compact && opt.id !== "none";
      return /* @__PURE__ */ import_react.default.createElement(
        "button",
        {
          key: opt.id,
          type: "button",
          className: `pisell-sku-detail-weighing__tare-chip${active ? " pisell-sku-detail-weighing__tare-chip--active" : ""}${showValue ? "" : " pisell-sku-detail-weighing__tare-chip--no-value"}`,
          onClick: () => onSelect(opt.id),
          "aria-pressed": active
        },
        /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-sku-detail-weighing__tare-chip-label" }, opt.label),
        showValue && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-sku-detail-weighing__tare-chip-value" }, (0, import_utils.formatWeight)(displayValue), " ", unitLabel)
      );
    })
  );
}
function TareManagementPanel(props) {
  const {
    componentStyle,
    tareOptions,
    selectedTare,
    customTareIdSet,
    unitLabel,
    maxTareValue,
    convertTareValue,
    getText,
    onSelectTare,
    onDeleteCustomTare,
    onAddCustomTare
  } = props;
  const [newTareLabel, setNewTareLabel] = (0, import_react.useState)("");
  const [newTareValue, setNewTareValue] = (0, import_react.useState)("");
  const [newTareKeyboardOpen, setNewTareKeyboardOpen] = (0, import_react.useState)(false);
  const trimmedNewTareLabel = newTareLabel.trim();
  const normalizedNewTareLabel = trimmedNewTareLabel.toLocaleLowerCase();
  const isDuplicateTareLabel = normalizedNewTareLabel !== "" && tareOptions.some(
    (item) => item.label.trim().toLocaleLowerCase() === normalizedNewTareLabel
  );
  const parsedNewTareValue = newTareValue === "" ? Number.NaN : Number(newTareValue);
  const isAddDisabled = !trimmedNewTareLabel || isDuplicateTareLabel || !Number.isFinite(parsedNewTareValue) || parsedNewTareValue < 0 || parsedNewTareValue > maxTareValue;
  const handleNewTareValueChange = (value) => {
    const nextValue = (0, import_utils.sanitizeManualWeight)(value);
    if (!nextValue) {
      setNewTareValue("");
      return;
    }
    const parsedValue = Number(nextValue);
    if (!Number.isFinite(parsedValue) || parsedValue > maxTareValue) {
      return;
    }
    setNewTareValue(nextValue);
  };
  const handleNewTareKeyboardConfirm = (value) => {
    handleNewTareValueChange(value);
    setNewTareKeyboardOpen(false);
  };
  const handleAddCustomTare = () => {
    if (isAddDisabled) {
      return;
    }
    const didAdd = onAddCustomTare({
      label: newTareLabel,
      value: parsedNewTareValue
    });
    if (!didAdd) {
      return;
    }
    setNewTareLabel("");
    setNewTareValue("");
    setNewTareKeyboardOpen(false);
  };
  const handleAddCustomTareInputKeyDown = (event) => {
    if (event.key !== "Enter") {
      return;
    }
    event.preventDefault();
    if (isAddDisabled) {
      return;
    }
    handleAddCustomTare();
  };
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "pisell-sku-detail-weighing__settings-panel",
      style: componentStyle
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-group" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-group-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-label" }, getText("pisell2.text.sku.detail.modal.weighing.metric.tare", "Tare")), /* @__PURE__ */ import_react.default.createElement(
      "button",
      {
        type: "button",
        onClick: () => onSelectTare("none"),
        className: "pisell-sku-detail-weighing__settings-link"
      },
      getText(
        "pisell2.text.sku.detail.modal.weighing.settings.clear",
        "Clear"
      )
    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-subtitle" }, getText(
      "pisell2.text.sku.detail.modal.weighing.settings.tare.subtitle",
      'If the reading is tared, please choose "No Tare".'
    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-tare-list" }, tareOptions.map((item) => {
      const active = selectedTare === item.id;
      const isCustom = customTareIdSet.has(item.id);
      const tareValueForDisplay = convertTareValue(item);
      return /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          key: item.id,
          className: `pisell-sku-detail-weighing__tare-option${active ? " pisell-sku-detail-weighing__tare-option--active" : ""}`,
          onClick: () => onSelectTare(item.id),
          onKeyDown: (event) => {
            if (event.key === "Enter" || event.key === " ") {
              event.preventDefault();
              onSelectTare(item.id);
            }
          },
          role: "button",
          tabIndex: 0,
          "aria-pressed": active
        },
        /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-sku-detail-weighing__tare-option-content" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-sku-detail-weighing__tare-option-label" }, item.label), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-sku-detail-weighing__tare-option-value" }, `${(0, import_utils.formatWeight)(tareValueForDisplay)} ${unitLabel}`)),
        isCustom ? /* @__PURE__ */ import_react.default.createElement(
          "button",
          {
            type: "button",
            className: "pisell-sku-detail-weighing__tare-delete",
            onClick: (event) => {
              event.stopPropagation();
              onDeleteCustomTare(item.id);
            },
            "aria-label": getText(
              "pisell2.text.sku.detail.modal.weighing.settings.delete.tare",
              "Delete tare"
            )
          },
          /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-trash-01", size: 14 })
        ) : null
      );
    }))),
    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-group" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-label" }, getText(
      "pisell2.text.sku.detail.modal.weighing.settings.add.tare",
      "Add Tare"
    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-form" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-sku-detail-weighing__settings-form-row" }, /* @__PURE__ */ import_react.default.createElement(
      "input",
      {
        value: newTareLabel,
        onChange: (event) => setNewTareLabel(event.target.value),
        onKeyDown: handleAddCustomTareInputKeyDown,
        placeholder: getText(
          "pisell2.text.sku.detail.modal.weighing.settings.label.placeholder",
          "Label"
        ),
        className: `pisell-sku-detail-weighing__settings-input${isDuplicateTareLabel ? " pisell-sku-detail-weighing__settings-input--error" : ""}`,
        "aria-invalid": isDuplicateTareLabel
      }
    ), /* @__PURE__ */ import_react.default.createElement(
      import_keyboards.NumberKeyboard,
      {
        defaultValue: newTareValue,
        originalValue: newTareValue,
        mode: "decimal",
        min: 0,
        max: maxTareValue,
        precision: 3,
        onEnter: handleNewTareKeyboardConfirm,
        containerProps: {
          className: "pisell-sku-detail-weighing__keyboard-popover",
          renderType: "popover",
          placement: "bottom",
          open: newTareKeyboardOpen,
          onOpenChange: setNewTareKeyboardOpen
        }
      },
      /* @__PURE__ */ import_react.default.createElement(
        "input",
        {
          value: newTareValue,
          onClick: () => setNewTareKeyboardOpen(true),
          onFocus: () => setNewTareKeyboardOpen(true),
          onKeyDown: handleAddCustomTareInputKeyDown,
          placeholder: unitLabel,
          inputMode: "decimal",
          className: "pisell-sku-detail-weighing__settings-input pisell-sku-detail-weighing__settings-input--readonly",
          readOnly: true
        }
      )
    ), /* @__PURE__ */ import_react.default.createElement(
      "button",
      {
        type: "button",
        onClick: handleAddCustomTare,
        className: "pisell-sku-detail-weighing__settings-action",
        disabled: isAddDisabled
      },
      getText(
        "pisell2.text.sku.detail.modal.weighing.settings.add",
        "Add"
      )
    ))))
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  TareManagementPanel,
  TareQuickBar
});
