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/components/pay/toC/PaymentMethods/MWCreditCard/List/index.tsx
var List_exports = {};
__export(List_exports, {
  default: () => List_default
});
module.exports = __toCommonJS(List_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_utils = require("@pisell/utils");
var import_ahooks = require("ahooks");
var import_materials = require("@pisell/materials");
var import_classnames = __toESM(require("classnames"));
var import_model = require("../../../model");
var import_serve = require("./serve");
var import_index = require("./index.less");
var MWCreditCardList = (props, ref) => {
  const { state } = (0, import_react.useContext)(import_model.Context);
  const [open, setOpen] = (0, import_react.useState)(false);
  const [currentCard, setCurrentCard] = (0, import_react.useState)(0);
  const [loading, setLoading] = (0, import_react.useState)(false);
  const [creditCardList, setCreditCardList] = (0, import_react.useState)([]);
  const [manage, setManage] = (0, import_react.useState)(false);
  const [order, setOrder] = (0, import_react.useState)(null);
  const _getCreditCardList = async () => {
    var _a;
    const cardList = await (0, import_serve.getCreditCardList)();
    if (!cardList.length) {
      (_a = props.onAdd) == null ? void 0 : _a.call(props);
      setLoading(false);
      return;
    }
    setCreditCardList(cardList);
    if (cardList.length) {
      setCurrentCard(cardList[0].id);
    }
    setLoading(false);
  };
  const init = async (_order) => {
    if (!creditCardList.length) {
      setLoading(true);
    }
    setOrder(_order);
    setOpen(true);
    setManage(false);
    setCurrentCard(0);
    _getCreditCardList();
  };
  const cardChange = (id) => {
    setCurrentCard(id);
  };
  const close = () => {
    setOpen(false);
  };
  (0, import_react.useImperativeHandle)(ref, () => ({
    init,
    close
  }));
  const renderOption = (d, active) => {
    return /* @__PURE__ */ import_react.default.createElement(
      import_materials.PisellRow,
      {
        key: d.id,
        platform: "h5",
        gap: 12,
        centerContentFill: true,
        leftContent: /* @__PURE__ */ import_react.default.createElement(
          "img",
          {
            className: "credit-card-type-image",
            src: (0, import_materials.getBankCardTypeImg)(d.card_number)
          }
        ),
        centerContent: /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: (0, import_classnames.default)("credit-card-name", {
              "text-active-color": active
            })
          },
          d.card_number
        ),
        rightContent: manage ? /* @__PURE__ */ import_react.default.createElement(
          import_materials.Iconfont,
          {
            type: "pisell2-trash-01",
            className: "remove-card-icon",
            onClick: () => {
              changeCreditCard(d.id);
            }
          }
        ) : void 0
      }
    );
  };
  const onCancel = () => {
    if (manage) {
      setManage(false);
      resetCards();
      return;
    }
    setOpen(false);
  };
  const resetCards = () => {
    let _list = [...creditCardList];
    _list.forEach((d) => {
      if (d.delete) {
        d.delete = 0;
      }
    });
    setCreditCardList(_list);
  };
  const handleBatchDeleteCards = () => {
    let deleteList = creditCardList.filter((d) => d.delete === 1);
    let newList = creditCardList.filter((d) => d.delete !== 1);
    let ids = deleteList.map((d) => d.id);
    if (ids.length) {
      setCreditCardList(newList);
      (0, import_serve.batchDeleteCards)({
        card_ids: ids
      });
    }
  };
  const { run: onOk } = (0, import_ahooks.useDebounceFn)(
    () => {
      var _a;
      if (manage) {
        setManage(false);
        handleBatchDeleteCards();
        return;
      }
      let cur = creditCardList.find((d) => d.id === currentCard);
      (_a = props.onChange) == null ? void 0 : _a.call(props, cur);
    },
    { wait: 300 }
  );
  const renderList = (0, import_react.useMemo)(() => {
    return creditCardList.filter((d) => d.delete !== 1);
  }, [creditCardList]);
  const changeCreditCard = (id) => {
    let _list = [...creditCardList];
    _list.forEach((d) => {
      if (d.id === id) {
        d.delete = 1;
      }
    });
    setCreditCardList(_list);
  };
  const okText = (0, import_react.useMemo)(() => {
    var _a, _b, _c;
    let current = (_a = state.payGroup) == null ? void 0 : _a.otherPayment;
    if (current == null ? void 0 : current.surcharge) {
      return /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, import_utils.locales.getText("tocPay.text.pay"), " ", /* @__PURE__ */ import_react.default.createElement(import_materials.PisellText.Amount, { value: ((_b = state.payGroup) == null ? void 0 : _b.wait_amount) || 0 }), " +", import_utils.locales.getText("tocPay.text.surcharge"));
    } else {
      return /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, import_utils.locales.getText("tocPay.text.pay"), " ", /* @__PURE__ */ import_react.default.createElement(import_materials.PisellText.Amount, { value: ((_c = state.payGroup) == null ? void 0 : _c.wait_amount) || 0 }));
    }
  }, [state.payGroup]);
  return /* @__PURE__ */ import_react.default.createElement(
    import_materials.PisellModal,
    {
      title: /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("tocPay.text.creditorDebitCard")),
      open,
      onCancel,
      cancelVisible: false,
      okText: manage ? import_utils.locales.getText("tocPay.text.done") : okText,
      onOk,
      okButtonProps: {
        disabled: !currentCard,
        loading: props.btnLoading,
        style: {
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
        }
      },
      bodyStyle: { padding: 24 }
    },
    !manage && /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellLoading, { loading, mask: true }, /* @__PURE__ */ import_react.default.createElement(
      import_materials.PisellCheckboxGroup,
      {
        platform: "h5",
        options: renderList,
        value: currentCard,
        iconPosition: "right",
        mode: "single",
        rowKey: "id",
        className: "credit-card-list",
        gap: 12,
        onChange: cardChange,
        optionClassName: "credit-card-item",
        renderOption
      }
    )), !loading && /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-plus" }),
        type: "dashed",
        className: "credit-card-add-button",
        onClick: props.onAdd
      },
      /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("tocPay.text.addCreditOrDebitCard"))
    )),
    manage && /* @__PURE__ */ import_react.default.createElement("div", { className: "credit-card-list manage-credit-card-list" }, renderList.map((d) => /* @__PURE__ */ import_react.default.createElement("div", { className: "credit-card-item manage-credit-card", key: d.id }, renderOption(d)))),
    !manage && renderList.length ? /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        type: "text",
        className: "credit-card-manage-button",
        onClick: () => {
          setManage(!manage);
        }
      },
      import_utils.locales.getText("tocPay.text.manageCard")
    ) : null
  );
};
var List_default = (0, import_react.forwardRef)(MWCreditCardList);
