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/pisellPaymentList/example.tsx
var example_exports = {};
__export(example_exports, {
  BasicExample: () => BasicExample,
  ChildrenExample: () => ChildrenExample,
  CustomItemExample: () => CustomItemExample,
  FullFeatureExample: () => FullFeatureExample,
  MethodConfigExample: () => MethodConfigExample,
  default: () => example_default
});
module.exports = __toCommonJS(example_exports);
var import_react = __toESM(require("react"));
var import_index = require("./index");
var BasicExample = () => {
  const [selectedId, setSelectedId] = (0, import_react.useState)("1");
  const paymentMethods = [
    {
      id: "1",
      name: "Credit Card",
      type: "card",
      code: "card",
      surcharge: "0",
      is_surcharge: true,
      percentage: 0.03,
      fixed: 0.5
    },
    {
      id: "2",
      name: "Cash",
      type: "cash",
      code: "cash",
      surcharge: "0",
      is_surcharge: false
    }
  ];
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.PisellPaymentList,
    {
      paymentMethods,
      amountSymbol: "$",
      customAmount: 100,
      selectedId,
      onSelect: (method) => {
        console.log("Selected:", method);
        setSelectedId(method.id);
      },
      isRadioMode: true,
      itemConfig: {
        containerStyle: {
          backgroundColor: "#fff",
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          padding: 16,
          selectedBorder: "2px solid #7F56D9",
          selectedBackgroundColor: "#f9f5ff"
        },
        titleStyle: {
          color: "#333",
          fontSize: 16,
          fontWeight: 500,
          selectedColor: "#7F56D9"
        },
        surchargeConfig: {
          show: true,
          label: "Service Fee",
          color: "#666",
          fontSize: 14
        },
        actionConfig: {
          style: "radio",
          radioStyle: {
            size: 20,
            checkedBorderColor: "#7F56D9",
            checkedBackgroundColor: "#F9F5FF",
            checkedDotColor: "#7F56D9"
          }
        }
      }
    }
  );
};
var ChildrenExample = () => {
  const [selectedId, setSelectedId] = (0, import_react.useState)("1");
  const paymentMethods = [
    {
      id: "1",
      name: "Credit Card",
      type: "card",
      code: "card",
      surcharge: "0",
      is_surcharge: true,
      percentage: 0.03,
      fixed: 0.5
    },
    {
      id: "2",
      name: "Cash",
      type: "cash",
      code: "cash",
      surcharge: "0",
      is_surcharge: false
    }
  ];
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.PisellPaymentList,
    {
      amountSymbol: "$",
      customAmount: 100,
      selectedId,
      onSelect: (method) => setSelectedId(method.id),
      isRadioMode: true,
      itemConfig: {
        containerStyle: {
          backgroundColor: "#fff",
          border: "1px solid #e0e0e0"
        }
      }
    },
    /* @__PURE__ */ import_react.default.createElement(
      import_index.PisellPaymentListItem,
      {
        method: paymentMethods[0]
      }
    ),
    /* @__PURE__ */ import_react.default.createElement(
      import_index.PisellPaymentListItem,
      {
        method: paymentMethods[1],
        containerStyle: { backgroundColor: "#f9f5ff" }
      }
    )
  );
};
var CustomPaymentItem = ({ method }) => {
  const parentContext = (0, import_index.usePaymentListContext)();
  if (!parentContext) {
    return /* @__PURE__ */ import_react.default.createElement("div", null, "请在 PaymentList 内部使用此组件");
  }
  const isSelected = parentContext.selectedId === method.id;
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      onClick: () => {
        var _a;
        return (_a = parentContext.onSelect) == null ? void 0 : _a.call(parentContext, method);
      },
      style: {
        padding: 16,
        border: isSelected ? "2px solid blue" : "1px solid gray",
        borderRadius: 8,
        cursor: "pointer",
        marginBottom: 8
      }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { style: { fontWeight: "bold" } }, method.name),
    /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 14, color: "#666" } }, "Amount: ", parentContext.amountSymbol, parentContext.customAmount),
    isSelected && /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "blue" } }, "✓ Selected")
  );
};
var CustomItemExample = () => {
  const [selectedId, setSelectedId] = (0, import_react.useState)("1");
  const paymentMethods = [
    {
      id: "1",
      name: "Credit Card",
      type: "card",
      code: "card",
      surcharge: "0"
    },
    {
      id: "2",
      name: "Cash",
      type: "cash",
      code: "cash",
      surcharge: "0"
    }
  ];
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.PisellPaymentList,
    {
      amountSymbol: "$",
      customAmount: 100,
      selectedId,
      onSelect: (method) => setSelectedId(method.id)
    },
    paymentMethods.map((method) => /* @__PURE__ */ import_react.default.createElement(CustomPaymentItem, { key: method.id, method }))
  );
};
var MethodConfigExample = () => {
  const [selectedId, setSelectedId] = (0, import_react.useState)("1");
  const paymentMethods = [
    {
      id: "1",
      name: "Premium Card",
      type: "card",
      code: "card",
      surcharge: "0",
      is_surcharge: true,
      percentage: 0.03,
      // 该支付方式的特定配置（优先级高于 List 的 itemConfig）
      itemConfig: {
        containerStyle: {
          backgroundColor: "#FFF8E1",
          border: "2px solid #FFD700",
          borderRadius: 12
        },
        titleStyle: {
          color: "#F57C00",
          fontWeight: "bold",
          text: "🌟 Premium Card (Recommended)"
        },
        iconConfig: {
          backgroundColor: "#FFD700",
          iconColor: "#F57C00"
        }
      }
    },
    {
      id: "2",
      name: "Regular Card",
      type: "card",
      code: "card2",
      surcharge: "0"
      // 使用默认配置
    },
    {
      id: "3",
      name: "Cash",
      type: "cash",
      code: "cash",
      surcharge: "0"
      // 使用默认配置
    }
  ];
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.PisellPaymentList,
    {
      paymentMethods,
      amountSymbol: "$",
      customAmount: 100,
      selectedId,
      onSelect: (method) => setSelectedId(method.id),
      isRadioMode: true,
      itemConfig: {
        containerStyle: {
          backgroundColor: "#f5f5f5",
          border: "1px solid #ddd",
          borderRadius: 8,
          padding: 16
        },
        titleStyle: {
          color: "#333",
          fontSize: 16
        }
      }
    }
  );
};
var FullFeatureExample = () => {
  var _a;
  const [selectedId, setSelectedId] = (0, import_react.useState)("1");
  const [amount, setAmount] = (0, import_react.useState)(100);
  const paymentMethods = [
    {
      id: "1",
      name: "Credit Card",
      type: "card",
      code: "card",
      surcharge: "0",
      is_surcharge: true,
      percentage: 0.029,
      fixed: 0.3
    },
    {
      id: "2",
      name: "Debit Card",
      type: "card",
      code: "debit",
      surcharge: "0",
      is_surcharge: true,
      percentage: 0.015,
      fixed: 0.1
    },
    {
      id: "3",
      name: "Cash",
      type: "cash",
      code: "cash",
      surcharge: "0",
      is_surcharge: false
    }
  ];
  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 20 } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Payment Options"), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 20 } }, /* @__PURE__ */ import_react.default.createElement("label", null, "Amount: $", /* @__PURE__ */ import_react.default.createElement(
    "input",
    {
      type: "number",
      value: amount,
      onChange: (e) => setAmount(Number(e.target.value)),
      style: { marginLeft: 8, padding: 4 }
    }
  ))), /* @__PURE__ */ import_react.default.createElement(
    import_index.PisellPaymentList,
    {
      paymentMethods,
      amountSymbol: "$",
      customAmount: amount,
      selectedId,
      onSelect: (method) => {
        console.log("Selected payment method:", method);
        setSelectedId(method.id);
      },
      onEdit: (method) => {
        console.log("Edit surcharge for:", method);
      },
      isRadioMode: true,
      maxHeight: 400,
      columnCount: 1,
      rowGap: 12,
      showScrollbar: false,
      itemConfig: {
        containerStyle: {
          backgroundColor: "#ffffff",
          border: "1px solid #E5E7EB",
          borderRadius: 12,
          padding: 16,
          selectedBorder: "2px solid #7F56D9",
          selectedBackgroundColor: "#F9FAFB"
        },
        titleStyle: {
          color: "#111827",
          fontSize: 16,
          fontWeight: 600,
          selectedColor: "#7F56D9"
        },
        surchargeConfig: {
          show: true,
          label: "Processing Fee",
          color: "#6B7280",
          fontSize: 14,
          selectedColor: "#7F56D9",
          enableEdit: true,
          editButtonStyle: {
            icon: "pisell2-edit",
            iconSize: 14,
            iconColor: "#7F56D9",
            backgroundColor: "#F3F4F6",
            padding: 4,
            borderRadius: 4,
            marginLeft: 8
          }
        },
        actionConfig: {
          style: "radio",
          radioStyle: {
            size: 20,
            checkedBorderColor: "#7F56D9",
            checkedBackgroundColor: "#F9F5FF",
            checkedDotColor: "#7F56D9",
            uncheckedBorderColor: "#D1D5DB",
            uncheckedBackgroundColor: "#FFFFFF"
          }
        }
      },
      scrollButtonStyle: {
        show: true,
        height: 60,
        backgroundColor: "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #E5E7EB 100%)",
        iconSize: 32,
        iconColor: "#6B7280"
      }
    }
  ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 20, padding: 16, backgroundColor: "#F3F4F6", borderRadius: 8 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "Selection Summary"), /* @__PURE__ */ import_react.default.createElement("p", null, "Selected ID: ", selectedId), /* @__PURE__ */ import_react.default.createElement("p", null, "Amount: $", amount), /* @__PURE__ */ import_react.default.createElement("p", null, "Selected Method:", " ", ((_a = paymentMethods.find((m) => m.id === selectedId)) == null ? void 0 : _a.name) || "None")));
};
var example_default = {
  BasicExample,
  ChildrenExample,
  CustomItemExample,
  MethodConfigExample,
  FullFeatureExample
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  BasicExample,
  ChildrenExample,
  CustomItemExample,
  FullFeatureExample,
  MethodConfigExample
});
