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/eftpos/PairModal/index.tsx
var PairModal_exports = {};
__export(PairModal_exports, {
  default: () => PairModal_default
});
module.exports = __toCommonJS(PairModal_exports);
var import_react = __toESM(require("react"));
var import_materials = require("@pisell/materials");
var import_utils = require("@pisell/utils");
var import_hooks = require("./hooks");
var import_index = require("./index.less");
var PairModal = ({
  visible,
  data,
  onCancel,
  onCheck,
  onConfirm
}) => {
  const { pairResponse, type } = data || {};
  const [cancelLoading, setCancelLoading] = (0, import_react.useState)(false);
  const [okLoading, setOkLoading] = (0, import_react.useState)(false);
  const [status, setStatus] = (0, import_react.useState)(
    "pairing"
  );
  const checkPairRequest = (0, import_hooks.useCheckPairRequest)();
  const unPairRequest = (0, import_hooks.useUnPairRequest)();
  const textInfo = (0, import_react.useMemo)(() => {
    return import_utils.locales.getText("page.eftpos.text.pair.modal.content.text-info")(
      status
    );
  }, [status]);
  const styleInfo = (0, import_react.useMemo)(() => {
    switch (status) {
      case "pairing":
        return {
          border: "1px solid #FEC84B",
          backgroundColor: "#FFFCF5",
          iconColor: "#DC6803",
          color: "#B54708",
          circle1Border: "2px solid rgba(220, 104, 3, 0.1)",
          circle2Border: "2px solid rgba(220, 104, 3, 0.5)"
        };
      case "success":
        return {
          border: "1px solid #75E0A7",
          backgroundColor: "#F6FEF9",
          iconColor: "#079455",
          color: "#067647",
          circle1Border: "2px solid rgba(7, 148, 85, 0.1)",
          circle2Border: "2px solid rgba(7, 148, 85, 0.5)"
        };
      case "failed":
        return {
          border: "1px solid #FDA29B",
          backgroundColor: "#FFFBFA",
          iconColor: "#D92D20",
          color: "#B42318",
          circle1Border: "2px solid rgba(217, 45, 32, 0.1)",
          circle2Border: "2px solid rgba(217, 45, 32, 0.5)"
        };
    }
  }, [status]);
  const _onCancel = async () => {
    if (cancelLoading || okLoading) {
      return;
    }
    try {
      setCancelLoading(true);
      await unPairRequest.run({
        type,
        pair_response: pairResponse
      });
    } catch (error) {
      console.error("onCancel error =>", error);
    } finally {
      setCancelLoading(false);
    }
    onCancel == null ? void 0 : onCancel();
  };
  const _onCheck = async () => {
    try {
      setOkLoading(true);
      const response = await checkPairRequest.run({
        type,
        pair_response: pairResponse
      });
      if ((response == null ? void 0 : response.code) == 200) {
        setStatus("success");
      } else {
        setStatus("failed");
      }
    } catch (error) {
      console.error("onCheck error =>", error);
      setStatus("failed");
    } finally {
      setOkLoading(false);
    }
  };
  const _onOk = async () => {
    if (cancelLoading || okLoading) {
      return;
    }
    if (status === "pairing" || status === "failed") {
      await _onCheck();
      onCheck == null ? void 0 : onCheck();
    } else if (status === "success") {
      onConfirm == null ? void 0 : onConfirm();
    }
  };
  return /* @__PURE__ */ import_react.default.createElement(
    import_materials.PisellModal,
    {
      open: visible,
      header: false,
      maskClosable: false,
      closable: false,
      zIndex: 9999,
      onCancel: _onCancel,
      onOk: _onOk,
      okText: textInfo.okButtonText,
      cancelText: textInfo.cancenButtonText,
      okButtonProps: {
        loading: okLoading
      },
      cancelButtonProps: {
        loading: cancelLoading
      }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content" }, /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "pisell-lowcode__pos-device-pair-modal-content-top",
        style: {
          border: styleInfo.border,
          backgroundColor: styleInfo.backgroundColor,
          color: styleInfo.color
        }
      },
      /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pisell-lowcode__pos-device-pair-modal-content-top-circle-1",
          style: {
            border: styleInfo.circle1Border
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "pisell-lowcode__pos-device-pair-modal-content-top-circle-2",
            style: {
              border: styleInfo.circle2Border
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            import_materials.Icon,
            {
              type: "pisell2-alert-circle",
              size: 20,
              style: { color: styleInfo.iconColor, opacity: 1 }
            }
          )
        )
      )),
      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-top-right" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-top-right-title" }, textInfo.title), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-top-right-description" }, textInfo.description))
    ), status !== "success" && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-code" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-code-title" }, textInfo.codeTitle), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-code-value" }, (pairResponse == null ? void 0 : pairResponse.confirmation_code) || "-")))
  );
};
var PairModal_default = PairModal;
