function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/**
 * RoomCard 主体纯展示：依赖 {@link buildRoomCardBodyViewModel} 输出，内部不调用 locales。
 */
import React, { useLayoutEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { FLOOR_ROOM_CARD_GUEST_SEGMENT_SEP } from "../floorRoomCardUtils";
import { IconClock, IconMoney, IconUsers, IconWarn } from "./RoomCardIcons";
function ScrollMiddle(props) {
  var outerRef = useRef(null);
  var innerRef = useRef(null);
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    scrollDist = _useState2[0],
    setScrollDist = _useState2[1];
  useLayoutEffect(function () {
    var outer = outerRef.current;
    var inner = innerRef.current;
    if (outer && inner) {
      var 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': "-".concat(scrollDist, "px")
    } : undefined
  }, props.children));
}
function ProgressBarView(props) {
  var isTimeout = props.isTimeout;
  var 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: "".concat(clamped, "%")
    }
  })));
}
function RoomCardGuestContactChunks(props) {
  var segments = props.segments,
    className = props.className;
  if (!segments.length) return null;
  return /*#__PURE__*/React.createElement("span", {
    className: className
  }, segments.map(function (seg, i) {
    return /*#__PURE__*/React.createElement("span", {
      key: i,
      className: "rc-contact-chunk"
    }, i > 0 ? FLOOR_ROOM_CARD_GUEST_SEGMENT_SEP : null, seg);
  }));
}
function PaymentStampView(props) {
  var 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));
}
export function RoomCardNextBookingStrip(props) {
  var nextLabel = props.nextLabel,
    guestSegments = props.guestSegments,
    guestLine = props.guestLine,
    timeRange = props.timeRange;
  var hasGuest = guestSegments && guestSegments.length > 0 || guestLine != null && String(guestLine).trim() !== '';
  return /*#__PURE__*/React.createElement("div", {
    className: "rc-next"
  }, /*#__PURE__*/React.createElement("span", {
    className: "rc-next__label"
  }, nextLabel), hasGuest ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "rc-next__sep"
  }, "\xB7"), guestSegments && guestSegments.length > 0 ? /*#__PURE__*/React.createElement("span", {
    className: "rc-next__guest-chunks"
  }, guestSegments.map(function (seg, i) {
    return /*#__PURE__*/React.createElement("span", {
      key: i,
      className: "rc-contact-chunk"
    }, i > 0 ? FLOOR_ROOM_CARD_GUEST_SEGMENT_SEP : null, seg);
  })) : /*#__PURE__*/React.createElement("span", null, guestLine)) : null, /*#__PURE__*/React.createElement("span", {
    className: "rc-next__sep"
  }, "\xB7"), /*#__PURE__*/React.createElement("span", null, timeRange));
}
export function RoomCardBodyView(props) {
  var model = props.model,
    scrollSurfaceHandlers = props.scrollSurfaceHandlers,
    nextBookingPrefix = props.nextBookingPrefix,
    bodyStatusTag = props.bodyStatusTag,
    _props$pinProgressToB = props.pinProgressToBottom,
    pinProgressToBottom = _props$pinProgressToB === void 0 ? true : _props$pinProgressToB;
  var checkoutDomKey = model.checkoutDomKey,
    contactName = model.contactName,
    contactPhoneMasked = model.contactPhoneMasked,
    showContactPhone = model.showContactPhone,
    guestContactSegments = model.guestContactSegments,
    timeLabel = model.timeLabel,
    partySize = model.partySize,
    countdown = model.countdown,
    reservedLateOverrun = model.reservedLateOverrun,
    occupiedTimeoutOverrun = model.occupiedTimeoutOverrun,
    orderNumberDisplay = model.orderNumberDisplay,
    paymentAmountClass = model.paymentAmountClass,
    paymentBadgeClass = model.paymentBadgeClass,
    paymentBadgeText = model.paymentBadgeText,
    paymentStampText = model.paymentStampText,
    paymentStampVariant = model.paymentStampVariant,
    amountDisplay = model.amountDisplay,
    amountPrefixLabel = model.amountPrefixLabel,
    showLargeAmountRow = model.showLargeAmountRow,
    showProgress = model.showProgress,
    showPaymentStamp = model.showPaymentStamp,
    showAmountInlineBadge = model.showAmountInlineBadge,
    showCompactCommerceRow = model.showCompactCommerceRow,
    itemsCountLabel = model.itemsCountLabel,
    itemsCountInsideScroll = model.itemsCountInsideScroll,
    showEdgeProgressRing = model.showEdgeProgressRing,
    showEdgeProgressRectBorder = model.showEdgeProgressRectBorder,
    progressPercent = model.progressPercent,
    progressIsTimeout = model.progressIsTimeout,
    nextGuestLine = model.nextGuestLine,
    nextGuestContactSegments = model.nextGuestContactSegments,
    nextTimeRange = model.nextTimeRange;
  var showContact = guestContactSegments.length > 0 || contactName || showContactPhone && contactPhoneMasked;

  /** 仅标准大卡正文（comfortable）；Tooltip 小卡走独立布局，不经由本组件 */
  var suppressSecondaryTimeHints = false;
  var suppressItemsCount = false;
  var nextStripVisible = nextTimeRange != null;
  var nextGuestSegmentsForStrip = nextGuestContactSegments;
  var contactMergedInline = false;
  var contactChunksFull = guestContactSegments.length ? /*#__PURE__*/React.createElement(RoomCardGuestContactChunks, {
    segments: guestContactSegments,
    className: "rc-contact__name rc-contact__chunks"
  }) : null;
  var contactFallbackFull = !guestContactSegments.length && showContact ? /*#__PURE__*/React.createElement(React.Fragment, null, contactName ? /*#__PURE__*/React.createElement("span", {
    className: "rc-contact__name"
  }, contactName) : null, showContactPhone && contactPhoneMasked ? /*#__PURE__*/React.createElement("span", {
    className: "rc-contact__phone"
  }, contactPhoneMasked) : null) : null;
  var contactChunksCompact = guestContactSegments.length ? /*#__PURE__*/React.createElement(RoomCardGuestContactChunks, {
    segments: guestContactSegments,
    className: "rc-compact__name rc-compact__name--chunks"
  }) : null;
  var contactFallbackCompact = !guestContactSegments.length && showContact ? /*#__PURE__*/React.createElement(React.Fragment, null, contactName ? /*#__PURE__*/React.createElement("span", {
    className: "rc-compact__name"
  }, contactName) : null, showContactPhone && contactPhoneMasked ? /*#__PURE__*/React.createElement("span", {
    className: "rc-compact__phone"
  }, contactPhoneMasked) : null) : null;
  if (model.layout === 'compact') {
    var compactContactInline = contactMergedInline;
    return /*#__PURE__*/React.createElement("div", {
      className: "rc-compact",
      "data-pisell-floor-checkout-booking": checkoutDomKey
    }, /*#__PURE__*/React.createElement("div", {
      className: classNames('rc-compact__row', compactContactInline && 'rc-compact__row--contact-inline')
    }, !compactContactInline ? /*#__PURE__*/React.createElement("div", {
      className: "rc-compact__left"
    }, guestContactSegments.length ? /*#__PURE__*/React.createElement(RoomCardGuestContactChunks, {
      segments: guestContactSegments,
      className: "rc-compact__name rc-compact__name--chunks"
    }) : null) : null, /*#__PURE__*/React.createElement(ScrollMiddle, null, compactContactInline && showContact ? /*#__PURE__*/React.createElement(React.Fragment, null, guestContactSegments.length ? contactChunksCompact : contactFallbackCompact, /*#__PURE__*/React.createElement("span", {
      className: "rc-sep"
    }, "\xB7")) : null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconClock, null), timeLabel), /*#__PURE__*/React.createElement("span", {
      className: "rc-sep"
    }, "\xB7"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconUsers, null), partySize), !suppressSecondaryTimeHints && countdown ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      className: "rc-sep"
    }, "\xB7"), /*#__PURE__*/React.createElement("span", {
      className: "rc-highlight--info"
    }, /*#__PURE__*/React.createElement(IconClock, null), countdown)) : null, !suppressSecondaryTimeHints && reservedLateOverrun ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      className: "rc-sep"
    }, "\xB7"), /*#__PURE__*/React.createElement("span", {
      className: "rc-highlight--danger"
    }, /*#__PURE__*/React.createElement(IconWarn, null), reservedLateOverrun)) : null, !suppressSecondaryTimeHints && occupiedTimeoutOverrun ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      className: "rc-sep"
    }, "\xB7"), /*#__PURE__*/React.createElement("span", {
      className: "rc-highlight--overtime"
    }, /*#__PURE__*/React.createElement(IconWarn, null), occupiedTimeoutOverrun)) : null, !suppressItemsCount && itemsCountInsideScroll ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      className: "rc-sep"
    }, "\xB7"), /*#__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)), !suppressItemsCount && itemsCountInsideScroll ? null : /*#__PURE__*/React.createElement("div", {
      className: "rc-compact__items-count"
    }, itemsCountLabel))) : null), pinProgressToBottom ? /*#__PURE__*/React.createElement("div", {
      className: "rc-body__progress-grow"
    }, showProgress && !showEdgeProgressRing && !showEdgeProgressRectBorder ? /*#__PURE__*/React.createElement(ProgressBarView, {
      percent: progressPercent,
      isTimeout: progressIsTimeout
    }) : null) : showProgress && !showEdgeProgressRing && !showEdgeProgressRectBorder ? /*#__PURE__*/React.createElement(ProgressBarView, {
      percent: progressPercent,
      isTimeout: progressIsTimeout
    }) : null);
  }
  return /*#__PURE__*/React.createElement("div", _extends({
    className: "rc-body",
    "data-pisell-floor-checkout-booking": checkoutDomKey,
    "data-pisell-floor-room-scroll-surface": ""
  }, scrollSurfaceHandlers), orderNumberDisplay ? /*#__PURE__*/React.createElement("div", {
    className: "rc-order-line"
  }, /*#__PURE__*/React.createElement("span", {
    className: "rc-order-line__number"
  }, orderNumberDisplay), bodyStatusTag ? /*#__PURE__*/React.createElement("span", {
    className: classNames('rc-tag', 'rc-order-line__status', "rc-tag--appointment-".concat(bodyStatusTag.tone))
  }, bodyStatusTag.label) : null) : null, showContact && !contactMergedInline ? /*#__PURE__*/React.createElement("div", {
    className: "rc-contact"
  }, guestContactSegments.length ? /*#__PURE__*/React.createElement(RoomCardGuestContactChunks, {
    segments: guestContactSegments,
    className: "rc-contact__name rc-contact__chunks"
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, 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: classNames('rc-time-row', contactMergedInline && 'rc-time-row--contact-inline')
  }, contactMergedInline ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "rc-time-row__contact"
  }, guestContactSegments.length ? contactChunksFull : contactFallbackFull), /*#__PURE__*/React.createElement("span", {
    className: "rc-sep"
  }, "\xB7")) : null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconClock, null), timeLabel), /*#__PURE__*/React.createElement("span", {
    className: "rc-sep"
  }, "\xB7"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconUsers, null), partySize), !suppressSecondaryTimeHints && countdown ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "rc-sep"
  }, "\xB7"), /*#__PURE__*/React.createElement("span", {
    className: "rc-highlight--info"
  }, /*#__PURE__*/React.createElement(IconClock, null), countdown)) : null, !suppressSecondaryTimeHints && reservedLateOverrun ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "rc-sep"
  }, "\xB7"), /*#__PURE__*/React.createElement("span", {
    className: "rc-highlight--danger"
  }, /*#__PURE__*/React.createElement(IconWarn, null), reservedLateOverrun)) : null, !suppressSecondaryTimeHints && occupiedTimeoutOverrun ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "rc-sep"
  }, "\xB7"), /*#__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"
  }, amountPrefixLabel ? /*#__PURE__*/React.createElement("span", {
    className: "rc-amount__prefix"
  }, amountPrefixLabel) : null, /*#__PURE__*/React.createElement(IconMoney, null), amountDisplay), showAmountInlineBadge ? /*#__PURE__*/React.createElement("span", {
    className: classNames('rc-compact__badge', paymentBadgeClass)
  }, paymentBadgeText) : null), !suppressItemsCount ? /*#__PURE__*/React.createElement("div", {
    className: "rc-items-count"
  }, itemsCountLabel) : null) : null, showPaymentStamp ? /*#__PURE__*/React.createElement(PaymentStampView, {
    variant: paymentStampVariant,
    label: paymentStampText
  }) : null, pinProgressToBottom ? /*#__PURE__*/React.createElement("div", {
    className: "rc-body__progress-grow"
  }, showProgress && !showEdgeProgressRing && !showEdgeProgressRectBorder ? /*#__PURE__*/React.createElement(ProgressBarView, {
    percent: progressPercent,
    isTimeout: progressIsTimeout
  }) : null) : showProgress && !showEdgeProgressRing && !showEdgeProgressRectBorder ? /*#__PURE__*/React.createElement(ProgressBarView, {
    percent: progressPercent,
    isTimeout: progressIsTimeout
  }) : null, nextStripVisible ? /*#__PURE__*/React.createElement(RoomCardNextBookingStrip, {
    nextLabel: nextBookingPrefix,
    guestSegments: nextGuestSegmentsForStrip,
    guestLine: nextGuestLine,
    timeRange: nextTimeRange
  }) : null);
}