const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_useEngineContext = require("../../../../hooks/useEngineContext.js");
const require_index = require("../../../../pro/NumericStepper/index.js");
const require_PisellPriceKeyboardModal = require("../../../../pro/pisellPriceKeyboardModal/PisellPriceKeyboardModal.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
require("./index.less");
//#region src/components/booking/components/customiseItemModal/index.tsx
const CustomiseItemModal = ({ visible = false, onClose, onSave, currencySymbol = "$", disabled = false }) => {
	const [productName, setProductName] = (0, react.useState)("");
	const [vouchersApplicable, setVouchersApplicable] = (0, react.useState)(false);
	const [priceType, setPriceType] = (0, react.useState)("sell");
	const [sellPrice, setSellPrice] = (0, react.useState)("");
	const [deductionPrice, setDeductionPrice] = (0, react.useState)("");
	const [quantity, setQuantity] = (0, react.useState)(1);
	const [showPriceKeyboard, setShowPriceKeyboard] = (0, react.useState)(false);
	const [currentTriggerRef, setCurrentTriggerRef] = (0, react.useState)(void 0);
	const sellPriceButtonRef = (0, react.useRef)(null);
	const deductionPriceButtonRef = (0, react.useRef)(null);
	require_useEngineContext.default();
	const Toast = (0, _pisell_materials.useToast)();
	const resetForm = () => {
		setProductName("");
		setVouchersApplicable(false);
		setPriceType("sell");
		setSellPrice("");
		setDeductionPrice("");
		setQuantity(1);
		setShowPriceKeyboard(false);
	};
	(0, react.useEffect)(() => {
		if (visible) resetForm();
	}, [visible]);
	const showKeyboard = (triggerRef, priceType) => {
		setCurrentTriggerRef(triggerRef);
		setPriceType(priceType);
		setShowPriceKeyboard(true);
	};
	const handleClose = () => {
		resetForm();
		onClose === null || onClose === void 0 || onClose();
	};
	const handleSave = () => {
		const currentPriceValue = priceType === "sell" ? sellPrice : deductionPrice;
		if (!currentPriceValue || currentPriceValue.trim() === "") {
			const priceTypeName = priceType === "sell" ? _pisell_utils.locales.getText("pisell2.customise-item.sell-price") : _pisell_utils.locales.getText("pisell2.customise-item.manual-deduction-price");
			const errorMessage = _pisell_utils.locales.getText("pisell2.customise-item.price-required-error")(priceTypeName);
			if (Toast) Toast.info(errorMessage);
			else alert(errorMessage);
			return;
		}
		const data = {
			productName: productName || _pisell_utils.locales.getText("pisell2.customise-item.default-product-name"),
			vouchersApplicable,
			priceType,
			priceValue: currentPriceValue,
			quantity
		};
		onSave === null || onSave === 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__ */ react.default.createElement(antd.Modal, {
		open: visible,
		onCancel: handleClose,
		footer: null,
		closable: false,
		width: 800,
		centered: true,
		className: "customise-item-modal"
	}, /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-modal-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-modal-header" }, /* @__PURE__ */ react.default.createElement("h2", { className: "customise-item-modal-title" }, _pisell_utils.locales.getText("pisell2.customise-item.modal-title")), /* @__PURE__ */ react.default.createElement(antd.Button, {
		type: "text",
		onClick: handleClose,
		className: "customise-item-modal-close",
		size: "large"
	}, "×")), /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-modal-body" }, /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-modal-illustration" }, /* @__PURE__ */ 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__ */ react.default.createElement("div", { className: "customise-item-modal-form" }, /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ react.default.createElement("label", { className: "customise-item-form-label" }, _pisell_utils.locales.getText("pisell2.customise-item.product-name")), /* @__PURE__ */ react.default.createElement(antd.Input, {
		value: productName,
		onChange: handleProductNameChange,
		placeholder: _pisell_utils.locales.getText("pisell2.customise-item.default-product-name"),
		maxLength: 60,
		className: "customise-item-product-name-input",
		disabled
	})), /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-vouchers-checkbox" }, /* @__PURE__ */ react.default.createElement("label", {
		className: "vouchers-label",
		onClick: () => !disabled && setVouchersApplicable(!vouchersApplicable)
	}, _pisell_utils.locales.getText("pisell2.customise-item.vouchers-applicable")), /* @__PURE__ */ react.default.createElement(antd.Checkbox, {
		checked: vouchersApplicable,
		onChange: (e) => setVouchersApplicable(e.target.checked),
		disabled,
		className: "vouchers-checkbox-input"
	}))), /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-price-option" }, /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: `customise-item-radio ${priceType === "sell" ? "active purple" : ""}`,
		onClick: () => setPriceType("sell")
	}, /* @__PURE__ */ react.default.createElement("div", { className: "radio-dot" })), /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-price-content" }, /* @__PURE__ */ react.default.createElement("span", { className: `customise-item-price-title ${priceType === "sell" ? "purple" : ""}` }, currencySymbol, " ", _pisell_utils.locales.getText("pisell2.customise-item.sell-price")), /* @__PURE__ */ react.default.createElement("button", {
		ref: sellPriceButtonRef,
		type: "button",
		className: `customise-item-price-input ${priceType === "sell" ? "active purple" : ""}`,
		onClick: () => showKeyboard(sellPriceButtonRef, "sell"),
		disabled
	}, /* @__PURE__ */ react.default.createElement("span", { className: "price-currency" }, currencySymbol), /* @__PURE__ */ react.default.createElement("div", { className: `price-input-display ${!sellPrice ? "placeholder" : ""}` }, sellPrice || _pisell_utils.locales.getText("pisell2.customise-item.amount-placeholder"))))), /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-price-option" }, /* @__PURE__ */ react.default.createElement("button", {
		type: "button",
		className: `customise-item-radio ${priceType === "deduction" ? "active red" : ""}`,
		onClick: () => setPriceType("deduction")
	}, /* @__PURE__ */ react.default.createElement("div", { className: "radio-dot" })), /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-price-content" }, /* @__PURE__ */ react.default.createElement("span", { className: `customise-item-price-title ${priceType === "deduction" ? "red" : ""}` }, currencySymbol, " ", _pisell_utils.locales.getText("pisell2.customise-item.manual-deduction-price")), /* @__PURE__ */ react.default.createElement("button", {
		ref: deductionPriceButtonRef,
		type: "button",
		className: `customise-item-price-input ${priceType === "deduction" ? "active red" : ""}`,
		onClick: () => showKeyboard(deductionPriceButtonRef, "deduction"),
		disabled
	}, /* @__PURE__ */ react.default.createElement("span", { className: "price-currency" }, currencySymbol), /* @__PURE__ */ react.default.createElement("span", { className: "price-minus" }, "-"), /* @__PURE__ */ react.default.createElement("div", { className: `price-input-display ${!deductionPrice ? "placeholder" : ""}` }, deductionPrice || _pisell_utils.locales.getText("pisell2.customise-item.amount-placeholder")))))), /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-modal-footer" }, /* @__PURE__ */ react.default.createElement(antd.Button, {
		type: "primary",
		size: "large",
		onClick: handleSave,
		disabled,
		className: "customise-item-save-btn"
	}, _pisell_utils.locales.getText("pisell2.customise-item.save"))))), /* @__PURE__ */ react.default.createElement("div", { className: "customise-item-quantity-selector-fixed" }, /* @__PURE__ */ react.default.createElement(require_index.default, {
		variant: "capsule",
		value: quantity,
		min: 1,
		max: 999,
		step: 1,
		disabled,
		onChange: (value) => {
			if (value < 1) setQuantity(1);
			else setQuantity(value);
		}
	}))), /* @__PURE__ */ react.default.createElement(require_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
	}));
};
//#endregion
exports.default = CustomiseItemModal;
