import { isWalkIn } from "../../../booking/utils.js";
import useEngineContext from "../../../../hooks/useEngineContext.js";
import locales_default from "../../locales.js";
import usePrefix from "../../../../hooks/usePrefix.js";
import useToast from "../../../../hooks/useToast.js";
import React, { useEffect, useState } from "react";
import { Modal } from "antd";
import { locales } from "@pisell/utils";
import classNames from "classnames";
import "./index.less";
//#region src/components/checkout/components/SendPaymentLinkModal/index.tsx
function SendPaymentLinkModal({ balanceAmount = "$15.1", customerEmail = "customer@email.com", customerName = "", onClose, sendPaymentLink, customerId }) {
	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4;
	const prefix = usePrefix();
	const context = useEngineContext();
	locales.init(locales_default, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get("umi_locale")) || "en");
	const Toast = useToast();
	const getText = (key, fallback) => {
		return locales.getText(key) || fallback;
	};
	const formatCustomerName = (customerName) => {
		if (isWalkIn(customerId)) return "";
		const formatTemplate = getText("pisell2.checkout.send-payment-link.customer-name-format");
		if (typeof formatTemplate === "function") return formatTemplate(customerName);
		return `${customerName}'s `;
	};
	const validateEmail = (email) => {
		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
	};
	const [emailAddress, setEmailAddress] = useState(customerEmail || "");
	useEffect(() => {
		setEmailAddress(customerEmail || "");
	}, [customerEmail]);
	const handleSendLink = () => {
		console.log("Send link clicked");
		console.log("Email to send:", emailAddress);
		console.log("Amount to send:", balanceAmount);
		if (!emailAddress || emailAddress.trim() === "") {
			Toast.fail(getText("pisell2.checkout.send-payment-link.email-required"));
			return;
		}
		if (!validateEmail(emailAddress.trim())) {
			Toast.fail(getText("pisell2.checkout.send-payment-link.email-invalid"));
			return;
		}
		sendPaymentLink({
			emails: [emailAddress.trim()],
			amount: balanceAmount
		});
		onClose === null || onClose === void 0 || onClose();
	};
	const modalContent = /* @__PURE__ */ React.createElement("div", { className: classNames("send-payment-link-modal") }, /* @__PURE__ */ React.createElement("div", { className: classNames("modal-content") }, /* @__PURE__ */ React.createElement("div", { className: classNames("main-content") }, /* @__PURE__ */ React.createElement("div", { className: classNames("illustration-container") }, /* @__PURE__ */ React.createElement("img", {
		src: prefix + "/send_payment_link.png",
		className: classNames("illustration")
	})), /* @__PURE__ */ React.createElement("div", { className: classNames("form-container") }, /* @__PURE__ */ React.createElement("div", { className: classNames("email-options-container") }, /* @__PURE__ */ React.createElement("div", { className: classNames("email-section") }, /* @__PURE__ */ React.createElement("div", { className: classNames("section-label") }, formatCustomerName(customerName), getText("pisell2.checkout.send-payment-link.email-address", "Email Address")), /* @__PURE__ */ React.createElement("div", { className: classNames("email-option") }, /* @__PURE__ */ React.createElement("div", { className: classNames("email-input-container") }, /* @__PURE__ */ React.createElement("div", { className: `${classNames("email-input")} ${classNames("email-input-selected")}` }, /* @__PURE__ */ React.createElement("input", {
		type: "email",
		value: emailAddress,
		onChange: (e) => setEmailAddress(e.target.value),
		placeholder: getText("pisell2.checkout.send-payment-link.email-placeholder", "Enter email address"),
		className: classNames("email-text-input")
	})))))), /* @__PURE__ */ React.createElement("div", { className: classNames("footer") }, /* @__PURE__ */ React.createElement("button", {
		className: classNames("send-button"),
		onClick: handleSendLink
	}, getText("pisell2.checkout.send-payment-link.send-button", "Send Link")))))));
	return /* @__PURE__ */ React.createElement(Modal, {
		title: getText("pisell2.checkout.send-payment-link.modal-title", "Send Payment Link"),
		width: 680,
		footer: null,
		centered: true,
		wrapClassName: "send-payment-link-modal-wrapper",
		open: true,
		onCancel: onClose
	}, modalContent);
}
//#endregion
export { SendPaymentLinkModal as default };
