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_classnames = __toESM(require("classnames"));
var import_utils = require("@pisell/utils");
var import_materials = require("@pisell/materials");
var import_NumericStepper = __toESM(require("../../../../pro/NumericStepper"));
var import_numberKeyboard = __toESM(require("../../../../pro/keyboards/numberKeyboard"));
var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
var import_responsive = require("../../../../responsive");
var import_compensatedPisellContainer = __toESM(require("../../../../pro/compensatedPisellContainer"));
var import_index = require("./index.less");
var CustomiseItemModal = ({
  visible = false,
  onClose,
  onSave,
  currencySymbol = "$",
  disabled = false,
  variant
}) => {
  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 [keyboardValue, setKeyboardValue] = (0, import_react.useState)("");
  const isPhone = variant === "phone";
  const context = (0, import_useEngineContext.default)();
  const Toast = (0, import_materials.useToast)();
  const resetForm = (0, import_react.useCallback)(() => {
    setProductName("");
    setVouchersApplicable(false);
    setPriceType("sell");
    setSellPrice("");
    setDeductionPrice("");
    setQuantity(1);
    setShowPriceKeyboard(false);
    setKeyboardValue("");
  }, []);
  (0, import_react.useEffect)(() => {
    if (visible) {
      resetForm();
    }
  }, [resetForm, visible]);
  const showKeyboard = (priceType2) => {
    setPriceType(priceType2);
    setKeyboardValue(priceType2 === "sell" ? sellPrice : deductionPrice);
    setShowPriceKeyboard(true);
  };
  const handleClose = (0, import_react.useCallback)(() => {
    resetForm();
    onClose == null ? void 0 : onClose();
  }, [onClose, resetForm]);
  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);
    }
  };
  const containerProps = (0, import_react.useMemo)(() => {
    if (isPhone) {
      return {
        open: visible,
        onClose: handleClose,
        placement: "bottom",
        header: false,
        footer: false,
        closable: false,
        destroyOnClose: true,
        className: "customise-item-modal customise-item-drawer-phone",
        contentWrapperStyle: {
          maxWidth: "none",
          height: "auto"
        },
        styles: {
          body: {
            padding: 0
          }
        }
      };
    }
    return {
      open: visible,
      onCancel: handleClose,
      footer: null,
      closable: false,
      header: null,
      width: 800,
      centered: true,
      className: "customise-item-modal"
    };
  }, [handleClose, isPhone, visible]);
  const renderActions = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-actions" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-quantity-selector-fixed" }, /* @__PURE__ */ import_react.default.createElement(
    import_NumericStepper.default,
    {
      size: "large",
      variant: "capsule",
      value: quantity,
      min: 1,
      max: 999,
      step: 1,
      disabled,
      onChange: (value) => {
        if (value < 1) {
          setQuantity(1);
        } else {
          setQuantity(value);
        }
      }
    }
  )), /* @__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")
  )));
  return /* @__PURE__ */ import_react.default.createElement(
    import_compensatedPisellContainer.default,
    {
      renderType: isPhone ? "drawer" : "modal",
      showHandlerBar: isPhone,
      props: containerProps
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: `customise-item-modal-content ${isPhone ? "customise-item-modal-content-phone" : ""}`
      },
      /* @__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")), !isPhone && /* @__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: (0, import_classnames.default)(
            "customise-item-modal-body",
            isPhone && "customise-item-modal-body-phone"
          )
        },
        !isPhone && /* @__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(
          "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",
          {
            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(
          "button",
          {
            type: "button",
            className: `customise-item-price-input ${priceType === "sell" ? "active purple" : ""}`,
            onClick: () => showKeyboard("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(
          "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",
          {
            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(
          "button",
          {
            type: "button",
            className: `customise-item-price-input ${priceType === "deduction" ? "active red" : ""}`,
            onClick: () => showKeyboard("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"
            )
          )
        ))))
      ),
      renderActions()
    ),
    /* @__PURE__ */ import_react.default.createElement(
      import_numberKeyboard.default,
      {
        mode: "decimal",
        containerProps: {
          renderType: "modal",
          open: showPriceKeyboard,
          onCancel: () => setShowPriceKeyboard(false),
          className: "customise-item-price-keyboard-modal"
        },
        value: keyboardValue,
        originalValue: priceType === "sell" ? sellPrice : deductionPrice,
        placeholder: import_utils.locales.getText(
          "pisell2.customise-item.amount-placeholder"
        ),
        maxLength: 10,
        precision: 2,
        onChange: setKeyboardValue,
        onEnter: (val) => {
          if (priceType === "sell") {
            setSellPrice(val);
          } else {
            setDeductionPrice(val);
          }
          setShowPriceKeyboard(false);
        }
      }
    )
  );
};
CustomiseItemModal.displayName = "CustomiseItemModal";
var customiseItemModal_default = (0, import_responsive.withResponsive)(CustomiseItemModal);
