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; }
import React, { useState } from 'react';
import { Button, Input, Radio, Space } from 'antd';
import { Edit05 } from '@pisell/icon';
import useModal from "./useModal";

/**
 * 如何在现有组件中集成新的 useModal hook 的示例
 * 
 * 这个示例展示了如何重构 SendPaymentLinkModal 来使用新的 useModal hook
 */

// 使用新的 useModal hook 重构后的 SendPaymentLinkModal
export var SendPaymentLinkModal = function SendPaymentLinkModal(_ref) {
  var _ref$balanceAmount = _ref.balanceAmount,
    balanceAmount = _ref$balanceAmount === void 0 ? "$15.1" : _ref$balanceAmount,
    _ref$customerEmail = _ref.customerEmail,
    customerEmail = _ref$customerEmail === void 0 ? "customer@email.com" : _ref$customerEmail;
  var _useState = useState('existing'),
    _useState2 = _slicedToArray(_useState, 2),
    selectedEmailOption = _useState2[0],
    setSelectedEmailOption = _useState2[1];
  var _useState3 = useState(''),
    _useState4 = _slicedToArray(_useState3, 2),
    newEmailAddress = _useState4[0],
    setNewEmailAddress = _useState4[1];

  // 使用新的 useModal hook
  var _useModal = useModal({
      defaultProps: {
        title: "Send Payment Link",
        width: 640,
        centered: true,
        footer: null
      }
    }),
    open = _useModal.open,
    close = _useModal.close,
    Modal = _useModal.Modal;
  var handleSendLink = function handleSendLink() {
    console.log('Send link clicked');
    if (selectedEmailOption === 'existing') {
      console.log('Send to existing email:', customerEmail);
    } else {
      console.log('Send to new email:', newEmailAddress);
    }
    close(); // 使用新的 close 方法
  };
  var handleSaveEmailAddress = function handleSaveEmailAddress() {
    console.log('Save email address clicked');
    close();
  };
  var openModal = function openModal() {
    open(); // 打开 modal
  };
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
    onClick: openModal
  }, "\u53D1\u9001\u652F\u4ED8\u94FE\u63A5"), /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '20px 0'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '32px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: '0 0 182px'
    }
  }, /*#__PURE__*/React.createElement("img", {
    src: "https://placehold.co/182x201",
    alt: "Send Payment Link Illustration",
    style: {
      width: '100%',
      height: 'auto'
    }
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: '24px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: '16px',
      fontWeight: 500,
      marginBottom: '8px'
    }
  }, "Balance amount"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: '32px',
      fontWeight: 600,
      color: '#1890ff'
    }
  }, balanceAmount)), /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: '16px',
      fontWeight: 500,
      marginBottom: '16px'
    }
  }, "Where would you like to send the payment link?"), /*#__PURE__*/React.createElement(Radio.Group, {
    value: selectedEmailOption,
    onChange: function onChange(e) {
      return setSelectedEmailOption(e.target.value);
    },
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: '16px'
    }
  }, /*#__PURE__*/React.createElement(Radio, {
    value: "existing"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: '8px'
    }
  }, /*#__PURE__*/React.createElement("span", null, "Send to existing email address"), /*#__PURE__*/React.createElement(Button, {
    type: "text",
    size: "small",
    icon: /*#__PURE__*/React.createElement(Edit05, null),
    style: {
      padding: 0,
      minWidth: 'auto'
    }
  }))), selectedEmailOption === 'existing' && /*#__PURE__*/React.createElement("div", {
    style: {
      marginLeft: '24px',
      marginTop: '8px',
      color: '#666'
    }
  }, customerEmail)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Radio, {
    value: "new"
  }, "Send to a new email address"), selectedEmailOption === 'new' && /*#__PURE__*/React.createElement(Input, {
    placeholder: "Enter email address",
    value: newEmailAddress,
    onChange: function onChange(e) {
      return setNewEmailAddress(e.target.value);
    },
    style: {
      marginLeft: '24px',
      marginTop: '8px'
    }
  })))), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    onClick: handleSendLink,
    style: {
      minWidth: '120px'
    }
  }, "Send Link"), selectedEmailOption === 'new' && /*#__PURE__*/React.createElement(Button, {
    onClick: handleSaveEmailAddress
  }, "Save Email Address"), /*#__PURE__*/React.createElement(Button, {
    onClick: close
  }, "Cancel")))))));
};

// 另一个使用示例：简单的确认对话框
export var ConfirmDeleteModal = function ConfirmDeleteModal() {
  var _useModal2 = useModal({
      defaultProps: {
        title: "确认删除",
        size: 'small',
        okText: '删除',
        cancelText: '取消',
        okType: 'danger'
      }
    }),
    open = _useModal2.open,
    close = _useModal2.close,
    Modal = _useModal2.Modal;
  var handleDelete = function handleDelete() {
    console.log('执行删除操作...');
    // 模拟异步删除
    setTimeout(function () {
      console.log('删除成功！');
      close();
    }, 1000);
  };
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
    danger: true,
    onClick: function onClick() {
      return open();
    }
  }, "\u5220\u9664\u9879\u76EE"), /*#__PURE__*/React.createElement(Modal, {
    onOk: handleDelete
  }, /*#__PURE__*/React.createElement("p", null, "\u786E\u5B9A\u8981\u5220\u9664\u8FD9\u4E2A\u9879\u76EE\u5417\uFF1F\u6B64\u64CD\u4F5C\u4E0D\u53EF\u64A4\u9500\u3002")));
};

// 使用示例：信息展示对话框
export var InfoModal = function InfoModal() {
  var _useModal3 = useModal({
      defaultProps: {
        title: "系统信息",
        footer: null,
        size: 'middle'
      }
    }),
    open = _useModal3.open,
    Modal = _useModal3.Modal;
  var handleOpenInfo = function handleOpenInfo() {
    open({
      title: "\u7CFB\u7EDF\u4FE1\u606F - ".concat(new Date().toLocaleString())
    });
  };
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
    onClick: handleOpenInfo
  }, "\u67E5\u770B\u7CFB\u7EDF\u4FE1\u606F"), /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '16px 0'
    }
  }, /*#__PURE__*/React.createElement("h4", null, "\u7CFB\u7EDF\u72B6\u6001"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "\u7248\u672C\uFF1Av2.1.0"), /*#__PURE__*/React.createElement("li", null, "\u8FD0\u884C\u65F6\u95F4\uFF1A15\u59293\u5C0F\u65F6"), /*#__PURE__*/React.createElement("li", null, "\u5185\u5B58\u4F7F\u7528\uFF1A65%"), /*#__PURE__*/React.createElement("li", null, "\u5B58\u50A8\u7A7A\u95F4\uFF1A78%")), /*#__PURE__*/React.createElement("h4", null, "\u6700\u8FD1\u66F4\u65B0"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "2024-01-15: \u4FEE\u590D\u652F\u4ED8\u6A21\u5757bug"), /*#__PURE__*/React.createElement("li", null, "2024-01-10: \u65B0\u589E\u6279\u91CF\u5BFC\u51FA\u529F\u80FD"), /*#__PURE__*/React.createElement("li", null, "2024-01-05: \u4F18\u5316\u9875\u9762\u52A0\u8F7D\u901F\u5EA6")))));
};

// 组合所有集成示例
export var IntegrationExamples = function IntegrationExamples() {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 24
    }
  }, /*#__PURE__*/React.createElement("h1", null, "useModal Hook \u96C6\u6210\u793A\u4F8B"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 24
    }
  }, /*#__PURE__*/React.createElement("h2", null, "\u91CD\u6784\u540E\u7684\u53D1\u9001\u652F\u4ED8\u94FE\u63A5\u6A21\u6001\u6846"), /*#__PURE__*/React.createElement(SendPaymentLinkModal, null)), /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 24
    }
  }, /*#__PURE__*/React.createElement("h2", null, "\u786E\u8BA4\u5220\u9664\u5BF9\u8BDD\u6846"), /*#__PURE__*/React.createElement(ConfirmDeleteModal, null)), /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 24
    }
  }, /*#__PURE__*/React.createElement("h2", null, "\u4FE1\u606F\u5C55\u793A\u5BF9\u8BDD\u6846"), /*#__PURE__*/React.createElement(InfoModal, null)));
};