/**
 * venueBooking 内容区域组件
 * 负责根据当前步骤渲染对应的子视图，管理桌面端 Cart 侧边栏和移动端 Footer
 */
import React, { useEffect, useRef } from 'react';
import { useVenueBookingContext } from "../../context";
import Header from "../Header";
import Footer from "../Footer";
import VenueSelection from "../VenueSelection";
import Addons from "../Addons";
import Checkout from "../Checkout";
import Cart from "../Cart";
export default function Content() {
  var _useVenueBookingConte = useVenueBookingContext(),
    currentStep = _useVenueBookingConte.currentStep,
    viewModel = _useVenueBookingConte.viewModel,
    handlePrimaryAction = _useVenueBookingConte.handlePrimaryAction,
    isSubmittingOrder = _useVenueBookingConte.isSubmittingOrder;

  /** 步骤 → 组件映射 */
  var stepRegistry = {
    'select-venue': /*#__PURE__*/React.createElement(VenueSelection, null),
    addons: /*#__PURE__*/React.createElement(Addons, null),
    checkout: /*#__PURE__*/React.createElement(Checkout, null)
  };
  var stepHeaderRef = useRef(null);

  /**
   * 动态测量 Step Header 高度并写入 --vb-grid-sticky-top。
   * 供 TimeGrid sticky 表头作为 top 偏移，以及 Cart 侧栏 sticky top 计算使用，
   * 保证三者不互相覆盖。
   */
  useEffect(function () {
    var wrap = stepHeaderRef.current;
    if (!wrap) return undefined;
    var scope = wrap.closest('.venue-booking-scope');
    if (!scope) return undefined;
    function update() {
      if (!wrap) return;
      scope === null || scope === void 0 || scope.style.setProperty('--vb-grid-sticky-top', "".concat(wrap.offsetHeight, "px"));
    }
    update();
    var ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(update) : null;
    ro === null || ro === void 0 || ro.observe(wrap);
    window.addEventListener('resize', update);
    return function () {
      ro === null || ro === void 0 || ro.disconnect();
      window.removeEventListener('resize', update);
    };
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, "\n        @keyframes slideLeft { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }\n        @keyframes slideRight { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } }\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }\n        /* \u9AA8\u67B6\u5C4F\u5149\u6761\uFF1A\u4ECE\u5DE6\u5230\u53F3\u626B\u8FC7\u8425\u9020\u6570\u636E\u52A0\u8F7D\u611F */\n        @keyframes vbShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }\n        .vb-skeleton-shimmer {\n          position: absolute;\n          inset: 0;\n          background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);\n          animation: vbShimmer 1.4s ease-in-out infinite;\n          pointer-events: none;\n        }\n\n        /* \u4F5C\u7528\u57DF reset\uFF1A\u4FEE\u590D\u5BBF\u4E3B\u73AF\u5883 preflight: false \u5BFC\u81F4\u6D4F\u89C8\u5668\u9ED8\u8BA4\u6837\u5F0F\u6CC4\u5165 */\n        .venue-booking-scope *,\n        .venue-booking-scope *::before,\n        .venue-booking-scope *::after {\n          box-sizing: border-box;\n        }\n        .venue-booking-scope {\n          --vb-primary: var(--theme-color, #ea1018);\n          --vb-primary-light: color-mix(in srgb, var(--vb-primary) 12%, #fff);\n          --vb-grid-sticky-top: 0px;\n          font-size: 16px;\n          line-height: 1.5;\n        }\n        .venue-booking-scope .vb-primary-text { color: var(--vb-primary); }\n        .venue-booking-scope button {\n          border: none;\n          outline: none;\n          background: transparent;\n          font: inherit;\n          color: inherit;\n          padding: 0;\n          cursor: pointer;\n        }\n        /* \u4EC5\u91CD\u7F6E\u65E0 class \u7684\u539F\u751F\u8F93\u5165\u6846\uFF0C\u907F\u514D\u8986\u76D6 Tailwind \u7EC4\u4EF6\u663E\u5F0F\u8FB9\u6846 */\n        .venue-booking-scope input:not([class]),\n        .venue-booking-scope textarea:not([class]) {\n          border: none;\n          outline: none;\n          font: inherit;\n          color: inherit;\n        }\n\n        /* \u8D2D\u7269\u8F66\u5185 Promotion \u533A\u5757\uFF1A\u7F29\u5C0F\u6807\u9898\u5B57\u53F7\uFF0C\u4E0E SubTotal \u7EDF\u4E00\u4E3A 16px */\n        .venue-booking-scope .pisell-lowcode__appointment-booking-voucher-container .voucher-title .voucher-title-left {\n          font-size: 16px;\n          font-weight: 600;\n          line-height: 24px;\n        }\n        .venue-booking-scope .pisell-lowcode__appointment-booking-voucher-container .voucher-title .voucher-title-right {\n          font-size: 14px;\n          font-weight: 500;\n        }\n\n        /* \u684C\u9762\u7AEF embedded-footer \u7C98\u5728\u4FA7\u8FB9\u680F\u5E95\u90E8 */\n        .venue-booking-scope .pisell-venue-booking-cart-embedded-footer {\n          position: sticky;\n          bottom: 0;\n          z-index: 5;\n          background: #fff;\n          border-radius: 0 0 28px 28px;\n        }\n      "), /*#__PURE__*/React.createElement("main", {
    className: "mx-auto max-w-[1500px] md:px-6 md:pt-6 lg:pb-12 h-full overscroll-none"
  }, /*#__PURE__*/React.createElement("div", {
    className: "space-y-2 md:space-y-4",
    style: {
      minHeight: '100%'
    }
  }, /*#__PURE__*/React.createElement("div", {
    ref: stepHeaderRef,
    className: "sticky top-0 z-40"
  }, /*#__PURE__*/React.createElement(Header, null)), /*#__PURE__*/React.createElement("div", {
    className: "grid max-w-full gap-2 md:gap-4 lg:grid-cols-[minmax(0,1fr)_390px] xl:grid-cols-[minmax(0,1fr)_420px]"
  }, /*#__PURE__*/React.createElement("section", {
    className: "min-w-0 space-y-3 overscroll-none md:space-y-5"
  }, stepRegistry[currentStep]), /*#__PURE__*/React.createElement("aside", {
    className: "hidden lg:block sticky self-start z-10 rounded-[28px] bg-white shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6",
    style: {
      top: 'calc(var(--vb-grid-sticky-top, 0px) + 1.5rem)'
    }
  }, /*#__PURE__*/React.createElement(Cart, {
    embedded: true,
    open: true,
    items: viewModel.cartItems,
    summary: viewModel.summary,
    onCancel: function onCancel() {},
    onNext: handlePrimaryAction,
    confirmLoading: isSubmittingOrder
  })))), /*#__PURE__*/React.createElement("div", {
    className: "sticky bottom-0 z-50 block lg:hidden"
  }, /*#__PURE__*/React.createElement(Footer, null))));
}