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