function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/**
 * PisellPaymentList 使用示例
 * 
 * 这个文件演示了如何使用 PisellPaymentList 和 PisellPaymentListItem 组件
 * 包括如何通过 Context 访问父组件配置
 */

import React, { useState } from 'react';
import { PisellPaymentList, PisellPaymentListItem, usePaymentListContext } from "./index";
// ============================================
// 示例 1: 基本使用（通过 paymentMethods 数组渲染）
// ============================================

export var BasicExample = function BasicExample() {
  var _useState = useState('1'),
    _useState2 = _slicedToArray(_useState, 2),
    selectedId = _useState2[0],
    setSelectedId = _useState2[1];
  var 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__*/React.createElement(PisellPaymentList, {
    paymentMethods: paymentMethods,
    amountSymbol: "$",
    customAmount: 100,
    selectedId: selectedId,
    onSelect: function 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'
        }
      }
    }
  });
};

// ============================================
// 示例 2: 使用 children 渲染（低代码场景）
// ============================================

export var ChildrenExample = function ChildrenExample() {
  var _useState3 = useState('1'),
    _useState4 = _slicedToArray(_useState3, 2),
    selectedId = _useState4[0],
    setSelectedId = _useState4[1];
  var 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__*/React.createElement(PisellPaymentList, {
    amountSymbol: "$",
    customAmount: 100,
    selectedId: selectedId,
    onSelect: function onSelect(method) {
      return setSelectedId(method.id);
    },
    isRadioMode: true,
    itemConfig: {
      containerStyle: {
        backgroundColor: '#fff',
        border: '1px solid #e0e0e0'
      }
    }
  }, /*#__PURE__*/React.createElement(PisellPaymentListItem, {
    method: paymentMethods[0]
    // 不需要传递 amountSymbol, customAmount 等
    // 会自动从父组件 Context 中获取
  }), /*#__PURE__*/React.createElement(PisellPaymentListItem, {
    method: paymentMethods[1]
    // 如果想覆盖某些配置，可以显式传递
    ,
    containerStyle: {
      backgroundColor: '#f9f5ff'
    }
  }));
};

// ============================================
// 示例 3: 自定义子组件访问 Context
// ============================================

// 创建一个自定义的子组件，可以访问父组件的配置
var CustomPaymentItem = function CustomPaymentItem(_ref) {
  var method = _ref.method;
  // 使用 Hook 获取父组件配置
  var parentContext = usePaymentListContext();
  if (!parentContext) {
    return /*#__PURE__*/React.createElement("div", null, "\u8BF7\u5728 PaymentList \u5185\u90E8\u4F7F\u7528\u6B64\u7EC4\u4EF6");
  }
  var isSelected = parentContext.selectedId === method.id;
  return /*#__PURE__*/React.createElement("div", {
    onClick: function onClick() {
      var _parentContext$onSele;
      return (_parentContext$onSele = parentContext.onSelect) === null || _parentContext$onSele === void 0 ? void 0 : _parentContext$onSele.call(parentContext, method);
    },
    style: {
      padding: 16,
      border: isSelected ? '2px solid blue' : '1px solid gray',
      borderRadius: 8,
      cursor: 'pointer',
      marginBottom: 8
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 'bold'
    }
  }, method.name), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      color: '#666'
    }
  }, "Amount: ", parentContext.amountSymbol, parentContext.customAmount), isSelected && /*#__PURE__*/React.createElement("div", {
    style: {
      color: 'blue'
    }
  }, "\u2713 Selected"));
};
export var CustomItemExample = function CustomItemExample() {
  var _useState5 = useState('1'),
    _useState6 = _slicedToArray(_useState5, 2),
    selectedId = _useState6[0],
    setSelectedId = _useState6[1];
  var paymentMethods = [{
    id: '1',
    name: 'Credit Card',
    type: 'card',
    code: 'card',
    surcharge: '0'
  }, {
    id: '2',
    name: 'Cash',
    type: 'cash',
    code: 'cash',
    surcharge: '0'
  }];
  return /*#__PURE__*/React.createElement(PisellPaymentList, {
    amountSymbol: "$",
    customAmount: 100,
    selectedId: selectedId,
    onSelect: function onSelect(method) {
      return setSelectedId(method.id);
    }
  }, paymentMethods.map(function (method) {
    return /*#__PURE__*/React.createElement(CustomPaymentItem, {
      key: method.id,
      method: method
    });
  }));
};

// ============================================
// 示例 4: 支付方式自带配置
// ============================================

export var MethodConfigExample = function MethodConfigExample() {
  var _useState7 = useState('1'),
    _useState8 = _slicedToArray(_useState7, 2),
    selectedId = _useState8[0],
    setSelectedId = _useState8[1];
  var 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__*/React.createElement(PisellPaymentList, {
    paymentMethods: paymentMethods,
    amountSymbol: "$",
    customAmount: 100,
    selectedId: selectedId,
    onSelect: function onSelect(method) {
      return setSelectedId(method.id);
    },
    isRadioMode: true
    // 默认配置（应用到所有未自定义配置的支付方式）
    ,
    itemConfig: {
      containerStyle: {
        backgroundColor: '#f5f5f5',
        border: '1px solid #ddd',
        borderRadius: 8,
        padding: 16
      },
      titleStyle: {
        color: '#333',
        fontSize: 16
      }
    }
  });
};

// ============================================
// 示例 5: 完整功能演示
// ============================================

export var FullFeatureExample = function FullFeatureExample() {
  var _paymentMethods$find;
  var _useState9 = useState('1'),
    _useState10 = _slicedToArray(_useState9, 2),
    selectedId = _useState10[0],
    setSelectedId = _useState10[1];
  var _useState11 = useState(100),
    _useState12 = _slicedToArray(_useState11, 2),
    amount = _useState12[0],
    setAmount = _useState12[1];
  var 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__*/React.createElement("div", {
    style: {
      padding: 20
    }
  }, /*#__PURE__*/React.createElement("h2", null, "Payment Options"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 20
    }
  }, /*#__PURE__*/React.createElement("label", null, "Amount: $", /*#__PURE__*/React.createElement("input", {
    type: "number",
    value: amount,
    onChange: function onChange(e) {
      return setAmount(Number(e.target.value));
    },
    style: {
      marginLeft: 8,
      padding: 4
    }
  }))), /*#__PURE__*/React.createElement(PisellPaymentList, {
    paymentMethods: paymentMethods,
    amountSymbol: "$",
    customAmount: amount,
    selectedId: selectedId,
    onSelect: function onSelect(method) {
      console.log('Selected payment method:', method);
      setSelectedId(method.id);
    },
    onEdit: function 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__*/React.createElement("div", {
    style: {
      marginTop: 20,
      padding: 16,
      backgroundColor: '#F3F4F6',
      borderRadius: 8
    }
  }, /*#__PURE__*/React.createElement("h3", null, "Selection Summary"), /*#__PURE__*/React.createElement("p", null, "Selected ID: ", selectedId), /*#__PURE__*/React.createElement("p", null, "Amount: $", amount), /*#__PURE__*/React.createElement("p", null, "Selected Method:", ' ', ((_paymentMethods$find = paymentMethods.find(function (m) {
    return m.id === selectedId;
  })) === null || _paymentMethods$find === void 0 ? void 0 : _paymentMethods$find.name) || 'None')));
};

// 默认导出所有示例
export default {
  BasicExample: BasicExample,
  ChildrenExample: ChildrenExample,
  CustomItemExample: CustomItemExample,
  MethodConfigExample: MethodConfigExample,
  FullFeatureExample: FullFeatureExample
};