import useEngineContext from "../../../../hooks/useEngineContext.js";
import CompensatedPisellContainer from "../../../../pro/compensatedPisellContainer/index.js";
import withResponsive from "../../../../responsive/withResponsive.js";
import NumberKeyboard from "../../../../pro/keyboards/numberKeyboard/index.js";
import NumericStepper from "../../../../pro/NumericStepper/index.js";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Button, Checkbox, Input } from "antd";
import { locales } from "@pisell/utils";
import { useToast } from "@pisell/materials";
import classNames from "classnames";
import "./index.less";
//#region src/components/booking/components/customiseItemModal/index.tsx
const CustomiseItemModal = ({ visible = false, onClose, onSave, currencySymbol = "$", disabled = false, variant }) => {
	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 [keyboardValue, setKeyboardValue] = useState("");
	const isPhone = variant === "phone";
	useEngineContext();
	const Toast = useToast();
	const resetForm = useCallback(() => {
		setProductName("");
		setVouchersApplicable(false);
		setPriceType("sell");
		setSellPrice("");
		setDeductionPrice("");
		setQuantity(1);
		setShowPriceKeyboard(false);
		setKeyboardValue("");
	}, []);
	useEffect(() => {
		if (visible) resetForm();
	}, [resetForm, visible]);
	const showKeyboard = (priceType) => {
		setPriceType(priceType);
		setKeyboardValue(priceType === "sell" ? sellPrice : deductionPrice);
		setShowPriceKeyboard(true);
	};
	const handleClose = useCallback(() => {
		resetForm();
		onClose === null || onClose === void 0 || onClose();
	}, [onClose, resetForm]);
	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);
	};
	const containerProps = 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__ */ React.createElement("div", { className: "customise-item-modal-actions" }, /* @__PURE__ */ React.createElement("div", { className: "customise-item-quantity-selector-fixed" }, /* @__PURE__ */ React.createElement(NumericStepper, {
		size: "large",
		variant: "capsule",
		value: quantity,
		min: 1,
		max: 999,
		step: 1,
		disabled,
		onChange: (value) => {
			if (value < 1) setQuantity(1);
			else setQuantity(value);
		}
	})), /* @__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"))));
	return /* @__PURE__ */ React.createElement(CompensatedPisellContainer, {
		renderType: isPhone ? "drawer" : "modal",
		showHandlerBar: isPhone,
		props: containerProps
	}, /* @__PURE__ */ React.createElement("div", { className: `customise-item-modal-content ${isPhone ? "customise-item-modal-content-phone" : ""}` }, /* @__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")), !isPhone && /* @__PURE__ */ React.createElement(Button, {
		type: "text",
		onClick: handleClose,
		className: "customise-item-modal-close",
		size: "large"
	}, "×")), /* @__PURE__ */ React.createElement("div", { className: classNames("customise-item-modal-body", isPhone && "customise-item-modal-body-phone") }, !isPhone && /* @__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("span", { className: `customise-item-price-title ${priceType === "sell" ? "purple" : ""}` }, currencySymbol, " ", locales.getText("pisell2.customise-item.sell-price")), /* @__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("button", {
		type: "button",
		className: `customise-item-price-input ${priceType === "sell" ? "active purple" : ""}`,
		onClick: () => showKeyboard("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("span", { className: `customise-item-price-title ${priceType === "deduction" ? "red" : ""}` }, currencySymbol, " ", locales.getText("pisell2.customise-item.manual-deduction-price")), /* @__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("button", {
		type: "button",
		className: `customise-item-price-input ${priceType === "deduction" ? "active red" : ""}`,
		onClick: () => showKeyboard("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"))))))), renderActions()), /* @__PURE__ */ React.createElement(NumberKeyboard, {
		mode: "decimal",
		containerProps: {
			renderType: "modal",
			open: showPriceKeyboard,
			onCancel: () => setShowPriceKeyboard(false),
			className: "customise-item-price-keyboard-modal"
		},
		value: keyboardValue,
		originalValue: priceType === "sell" ? sellPrice : deductionPrice,
		placeholder: 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 = withResponsive(CustomiseItemModal);
//#endregion
export { customiseItemModal_default as default };
