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/booking/components/customiseItemModal/index.tsx
var customiseItemModal_exports = {};
__export(customiseItemModal_exports, {
  default: () => customiseItemModal_default
});
module.exports = __toCommonJS(customiseItemModal_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_utils = require("@pisell/utils");
var import_pisellNumberSelector = __toESM(require("../../../../pro/pisellNumberSelector"));
var import_pisellPriceKeyboardModal = __toESM(require("../../../../pro/pisellPriceKeyboardModal"));
var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
var import_index = require("./index.less");
var CustomiseItemModal = ({
  visible = false,
  onClose,
  onSave,
  currencySymbol = "$",
  disabled = false
}) => {
  var _a, _b;
  const [productName, setProductName] = (0, import_react.useState)("");
  const [vouchersApplicable, setVouchersApplicable] = (0, import_react.useState)(false);
  const [priceType, setPriceType] = (0, import_react.useState)("sell");
  const [sellPrice, setSellPrice] = (0, import_react.useState)("");
  const [deductionPrice, setDeductionPrice] = (0, import_react.useState)("");
  const [quantity, setQuantity] = (0, import_react.useState)(1);
  const [showPriceKeyboard, setShowPriceKeyboard] = (0, import_react.useState)(false);
  const [currentTriggerRef, setCurrentTriggerRef] = (0, import_react.useState)(void 0);
  const sellPriceButtonRef = (0, import_react.useRef)(null);
  const deductionPriceButtonRef = (0, import_react.useRef)(null);
  const context = (0, import_useEngineContext.default)();
  const Toast = (_b = (_a = context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.Toast;
  const resetForm = () => {
    setProductName("");
    setVouchersApplicable(false);
    setPriceType("sell");
    setSellPrice("");
    setDeductionPrice("");
    setQuantity(1);
    setShowPriceKeyboard(false);
  };
  (0, import_react.useEffect)(() => {
    if (visible) {
      resetForm();
    }
  }, [visible]);
  const showKeyboard = (triggerRef, priceType2) => {
    setCurrentTriggerRef(triggerRef);
    setPriceType(priceType2);
    setShowPriceKeyboard(true);
  };
  const handleClose = () => {
    resetForm();
    onClose == null ? void 0 : onClose();
  };
  const handleSave = () => {
    const currentPriceValue = priceType === "sell" ? sellPrice : deductionPrice;
    if (!currentPriceValue || currentPriceValue.trim() === "") {
      const priceTypeName = priceType === "sell" ? import_utils.locales.getText("pisell2.customise-item.sell-price") : import_utils.locales.getText("pisell2.customise-item.manual-deduction-price");
      const errorMessage = import_utils.locales.getText("pisell2.customise-item.price-required-error")(priceTypeName);
      if (Toast) {
        Toast.info(errorMessage);
      } else {
        alert(errorMessage);
      }
      return;
    }
    const data = {
      productName: productName || import_utils.locales.getText("pisell2.customise-item.default-product-name"),
      vouchersApplicable,
      priceType,
      priceValue: currentPriceValue,
      quantity
    };
    onSave == null ? void 0 : onSave(data);
    handleClose();
  };
  const validateProductName = (value) => {
    return value.length <= 60;
  };
  const handleProductNameChange = (e) => {
    const value = e.target.value;
    if (validateProductName(value)) {
      setProductName(value);
    }
  };
  return /* @__PURE__ */ import_react.default.createElement(
    import_antd.Modal,
    {
      open: visible,
      onCancel: handleClose,
      footer: null,
      closable: false,
      width: 800,
      centered: true,
      className: "customise-item-modal"
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-header" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: "customise-item-modal-title" }, import_utils.locales.getText("pisell2.customise-item.modal-title")), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        type: "text",
        onClick: handleClose,
        className: "customise-item-modal-close",
        size: "large"
      },
      "×"
    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-body" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-illustration" }, /* @__PURE__ */ import_react.default.createElement(
      "img",
      {
        src: "https://static.pisellcdn.com/custom-product-img.png",
        alt: "Custom item illustration",
        className: "customise-item-illustration-image",
        style: {
          width: "100%",
          height: "100%",
          objectFit: "contain"
        }
      }
    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-form" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "customise-item-form-label" }, import_utils.locales.getText("pisell2.customise-item.product-name")), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Input,
      {
        value: productName,
        onChange: handleProductNameChange,
        placeholder: import_utils.locales.getText(
          "pisell2.customise-item.default-product-name"
        ),
        maxLength: 60,
        className: "customise-item-product-name-input",
        disabled
      }
    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-vouchers-checkbox" }, /* @__PURE__ */ import_react.default.createElement(
      "label",
      {
        className: "vouchers-label",
        onClick: () => !disabled && setVouchersApplicable(!vouchersApplicable)
      },
      import_utils.locales.getText("pisell2.customise-item.vouchers-applicable")
    ), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Checkbox,
      {
        checked: vouchersApplicable,
        onChange: (e) => setVouchersApplicable(e.target.checked),
        disabled,
        className: "vouchers-checkbox-input"
      }
    ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-price-option" }, /* @__PURE__ */ import_react.default.createElement(
      "button",
      {
        type: "button",
        className: `customise-item-radio ${priceType === "sell" ? "active purple" : ""}`,
        onClick: () => setPriceType("sell")
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: "radio-dot" })
    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-price-content" }, /* @__PURE__ */ import_react.default.createElement(
      "span",
      {
        className: `customise-item-price-title ${priceType === "sell" ? "purple" : ""}`
      },
      currencySymbol,
      " ",
      import_utils.locales.getText("pisell2.customise-item.sell-price")
    ), /* @__PURE__ */ import_react.default.createElement(
      "button",
      {
        ref: sellPriceButtonRef,
        type: "button",
        className: `customise-item-price-input ${priceType === "sell" ? "active purple" : ""}`,
        onClick: () => showKeyboard(sellPriceButtonRef, "sell"),
        disabled
      },
      /* @__PURE__ */ import_react.default.createElement("span", { className: "price-currency" }, currencySymbol),
      /* @__PURE__ */ import_react.default.createElement("div", { className: `price-input-display ${!sellPrice ? "placeholder" : ""}` }, sellPrice || import_utils.locales.getText(
        "pisell2.customise-item.amount-placeholder"
      ))
    ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-price-option" }, /* @__PURE__ */ import_react.default.createElement(
      "button",
      {
        type: "button",
        className: `customise-item-radio ${priceType === "deduction" ? "active red" : ""}`,
        onClick: () => setPriceType("deduction")
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: "radio-dot" })
    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-price-content" }, /* @__PURE__ */ import_react.default.createElement(
      "span",
      {
        className: `customise-item-price-title ${priceType === "deduction" ? "red" : ""}`
      },
      currencySymbol,
      " ",
      import_utils.locales.getText(
        "pisell2.customise-item.manual-deduction-price"
      )
    ), /* @__PURE__ */ import_react.default.createElement(
      "button",
      {
        ref: deductionPriceButtonRef,
        type: "button",
        className: `customise-item-price-input ${priceType === "deduction" ? "active red" : ""}`,
        onClick: () => showKeyboard(deductionPriceButtonRef, "deduction"),
        disabled
      },
      /* @__PURE__ */ import_react.default.createElement("span", { className: "price-currency" }, currencySymbol),
      /* @__PURE__ */ import_react.default.createElement("span", { className: "price-minus" }, "-"),
      /* @__PURE__ */ import_react.default.createElement("div", { className: `price-input-display ${!deductionPrice ? "placeholder" : ""}` }, deductionPrice || import_utils.locales.getText(
        "pisell2.customise-item.amount-placeholder"
      ))
    )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-footer" }, /* @__PURE__ */ import_react.default.createElement(
      import_antd.Button,
      {
        type: "primary",
        size: "large",
        onClick: handleSave,
        disabled,
        className: "customise-item-save-btn"
      },
      import_utils.locales.getText("pisell2.customise-item.save")
    )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-quantity-selector-fixed" }, /* @__PURE__ */ import_react.default.createElement(
      import_pisellNumberSelector.default,
      {
        value: quantity,
        min: 1,
        max: 999,
        step: 1,
        disabled,
        onChange: (value) => {
          if (value < 1) {
            setQuantity(1);
          } else {
            setQuantity(value);
          }
        },
        size: "middle",
        enablePriceAdjust: true
      }
    ))),
    /* @__PURE__ */ import_react.default.createElement(
      import_pisellPriceKeyboardModal.default,
      {
        visible: showPriceKeyboard,
        value: priceType === "sell" ? sellPrice : deductionPrice,
        onChange: (val) => {
          if (priceType === "sell") {
            setSellPrice(String(val));
          } else {
            setDeductionPrice(String(val));
          }
        },
        onClose: () => setShowPriceKeyboard(false),
        triggerRef: currentTriggerRef,
        showCurrencySymbol: true,
        useThousandsSeparator: false
      }
    )
  );
};
var customiseItemModal_default = CustomiseItemModal;
