import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { IconClock, IconMoney, IconUsers, IconWarn } from "./RoomCardIcons.js";
import React, { useLayoutEffect, useRef, useState } from "react";
import classNames from "classnames";
//#region src/plus/pisellReservation/floorRoomCard/views/RoomCardBodyView.tsx
/**
* RoomCard 主体纯展示：依赖 {@link buildRoomCardBodyViewModel} 输出，内部不调用 locales。
*/
function ScrollMiddle(props) {
	const outerRef = useRef(null);
	const innerRef = useRef(null);
	const [scrollDist, setScrollDist] = useState(0);
	useLayoutEffect(() => {
		const outer = outerRef.current;
		const inner = innerRef.current;
		if (outer && inner) {
			const diff = inner.scrollWidth - outer.clientWidth;
			setScrollDist(diff > 0 ? diff + 20 : 0);
		}
	}, [props.children]);
	return /* @__PURE__ */ React.createElement("div", {
		className: "rc-compact__middle",
		ref: outerRef
	}, /* @__PURE__ */ React.createElement("div", {
		className: classNames("rc-compact__scroll", scrollDist > 0 && "rc-compact__scroll--animate"),
		ref: innerRef,
		style: scrollDist > 0 ? { "--scroll-dist": `-${scrollDist}px` } : void 0
	}, props.children));
}
function ProgressBarView(props) {
	const { isTimeout } = props;
	const clamped = Math.min(100, Math.max(0, props.percent));
	return /* @__PURE__ */ React.createElement("div", { className: "rc-progress" }, /* @__PURE__ */ React.createElement("div", { className: "rc-progress__bar" }, /* @__PURE__ */ React.createElement("div", {
		className: classNames("rc-progress__fill", isTimeout && "rc-progress__fill--warn"),
		style: { width: `${clamped}%` }
	})));
}
function PaymentStampView(props) {
	const stampCls = props.variant === "paid" ? "rc-stamp--paid" : "rc-stamp--unpaid";
	return /* @__PURE__ */ React.createElement("div", { className: classNames("rc-stamp", stampCls) }, /* @__PURE__ */ React.createElement("span", null, props.label));
}
/** 与标准卡底部 Next 区一致，供多预约卡等复用 */
function RoomCardNextBookingStrip(props) {
	const { nextLabel, guestLine, timeRange } = props;
	return /* @__PURE__ */ React.createElement("div", { className: "rc-next" }, /* @__PURE__ */ React.createElement("span", { className: "rc-next__label" }, nextLabel), guestLine ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rc-next__sep" }, "·"), /* @__PURE__ */ React.createElement("span", null, guestLine)) : null, /* @__PURE__ */ React.createElement("span", { className: "rc-next__sep" }, "·"), /* @__PURE__ */ React.createElement("span", null, timeRange));
}
function RoomCardBodyView(props) {
	const { model, scrollSurfaceHandlers, nextBookingPrefix } = props;
	const { checkoutDomKey, contactName, contactPhoneMasked, showContactPhone, guestNameCompact, timeLabel, partySize, countdown, reservedLateOverrun, occupiedTimeoutOverrun, paymentAmountClass, paymentBadgeClass, paymentBadgeText, paymentStampText, paymentStampVariant, amountDisplay, showLargeAmountRow, showProgress, showPaymentStamp, showAmountInlineBadge, showCompactCommerceRow, itemsCountLabel, itemsCountInsideScroll, progressPercent, progressIsTimeout, nextGuestLine, nextTimeRange } = model;
	const showContact = contactName || showContactPhone && contactPhoneMasked;
	if (model.layout === "compact") return /* @__PURE__ */ React.createElement("div", {
		className: "rc-compact",
		"data-pisell-floor-checkout-booking": checkoutDomKey
	}, /* @__PURE__ */ React.createElement("div", { className: "rc-compact__row" }, /* @__PURE__ */ React.createElement("div", { className: "rc-compact__left" }, guestNameCompact ? /* @__PURE__ */ React.createElement("span", { className: "rc-compact__name" }, guestNameCompact) : null), /* @__PURE__ */ React.createElement(ScrollMiddle, null, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(IconClock, null), timeLabel), /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(IconUsers, null), partySize), countdown ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", { className: "rc-highlight--info" }, /* @__PURE__ */ React.createElement(IconClock, null), countdown)) : null, reservedLateOverrun ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", { className: "rc-highlight--danger" }, /* @__PURE__ */ React.createElement(IconWarn, null), reservedLateOverrun)) : null, occupiedTimeoutOverrun ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", { className: "rc-highlight--overtime" }, /* @__PURE__ */ React.createElement(IconWarn, null), occupiedTimeoutOverrun)) : null, itemsCountInsideScroll ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", { className: classNames("rc-compact__items-count", "rc-compact__items-count--in-scroll") }, itemsCountLabel)) : null), showCompactCommerceRow ? /* @__PURE__ */ React.createElement("div", { className: "rc-compact__right" }, /* @__PURE__ */ React.createElement("div", { className: "rc-compact__right-stack" }, /* @__PURE__ */ React.createElement("div", { className: "rc-compact__pay-row" }, /* @__PURE__ */ React.createElement("span", { className: classNames("rc-compact__amount", "rc-amount__main", paymentAmountClass) }, /* @__PURE__ */ React.createElement(IconMoney, null), amountDisplay), /* @__PURE__ */ React.createElement("span", { className: classNames("rc-compact__badge", paymentBadgeClass) }, paymentBadgeText)), itemsCountInsideScroll ? null : /* @__PURE__ */ React.createElement("div", { className: "rc-compact__items-count" }, itemsCountLabel))) : null), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React.createElement(ProgressBarView, {
		percent: progressPercent,
		isTimeout: progressIsTimeout
	}));
	return /* @__PURE__ */ React.createElement("div", _objectSpread2({
		className: "rc-body",
		"data-pisell-floor-checkout-booking": checkoutDomKey,
		"data-pisell-floor-room-scroll-surface": ""
	}, scrollSurfaceHandlers), showContact ? /* @__PURE__ */ React.createElement("div", { className: "rc-contact" }, contactName ? /* @__PURE__ */ React.createElement("span", { className: "rc-contact__name" }, contactName) : null, showContactPhone && contactPhoneMasked ? /* @__PURE__ */ React.createElement("span", { className: "rc-contact__phone" }, contactPhoneMasked) : null) : null, /* @__PURE__ */ React.createElement("div", { className: "rc-time-row" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(IconClock, null), timeLabel), /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(IconUsers, null), partySize), countdown ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", { className: "rc-highlight--info" }, /* @__PURE__ */ React.createElement(IconClock, null), countdown)) : null, reservedLateOverrun ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", { className: "rc-highlight--danger" }, /* @__PURE__ */ React.createElement(IconWarn, null), reservedLateOverrun)) : null, occupiedTimeoutOverrun ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "rc-sep" }, "·"), /* @__PURE__ */ React.createElement("span", { className: "rc-highlight--overtime" }, /* @__PURE__ */ React.createElement(IconWarn, null), occupiedTimeoutOverrun)) : null), showLargeAmountRow ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classNames("rc-amount", showAmountInlineBadge && "rc-amount--with-badge", paymentAmountClass) }, /* @__PURE__ */ React.createElement("span", { className: "rc-amount__main" }, /* @__PURE__ */ React.createElement(IconMoney, null), amountDisplay), showAmountInlineBadge ? /* @__PURE__ */ React.createElement("span", { className: classNames("rc-compact__badge", paymentBadgeClass) }, paymentBadgeText) : null), /* @__PURE__ */ React.createElement("div", { className: "rc-items-count" }, itemsCountLabel)) : null, /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }), showProgress ? /* @__PURE__ */ React.createElement(ProgressBarView, {
		percent: progressPercent,
		isTimeout: progressIsTimeout
	}) : null, showPaymentStamp ? /* @__PURE__ */ React.createElement(PaymentStampView, {
		variant: paymentStampVariant,
		label: paymentStampText
	}) : null, nextTimeRange != null ? /* @__PURE__ */ React.createElement(RoomCardNextBookingStrip, {
		nextLabel: nextBookingPrefix,
		guestLine: nextGuestLine,
		timeRange: nextTimeRange
	}) : null);
}
//#endregion
export { RoomCardBodyView, RoomCardNextBookingStrip };
