import React, { useMemo, useEffect } from 'react';
import { useStep } from "../../../../Sales";
import { isMobile } from '@pisell/utils';
import CartItem from "../Cart/Item";
import Resource from "../Resource";
import Event from "../Event";
import Information from "../Information";
import "./index.less";
var Layout = function Layout() {
  var _useStep = useStep(),
    currentStepData = _useStep.currentStepData,
    isFirstStep = _useStep.isFirstStep;
  useEffect(function () {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }, [currentStepData === null || currentStepData === void 0 ? void 0 : currentStepData.key]);
  var Com = useMemo(function () {
    var key = currentStepData === null || currentStepData === void 0 ? void 0 : currentStepData.key;
    if (!key) return null;
    var components = {
      // 选择资源
      'select-category': Resource,
      // 选择event
      'select-event': Event,
      // 确认信息
      'confirm-information': Information
    };
    var Com = components[key];
    return /*#__PURE__*/React.createElement(Com, null);
  }, [currentStepData === null || currentStepData === void 0 ? void 0 : currentStepData.key]);

  /**
   * @title: 动态计算中间内容区域的高度
   * @description:
   * @return {*}
   * @Author: WangHan
   * @Date: 2025-02-18 15:36
   */
  useEffect(function () {
    if (isMobile()) {
      var _header$getBoundingCl, _footer$getBoundingCl;
      var header = document.querySelector('.event-progress-bar');
      var footer = document.querySelector('.pisell-section-footers-wrapper');
      var content = document.querySelector('.event-content-mobile-wrap');
      var headerHeight = (header === null || header === void 0 || (_header$getBoundingCl = header.getBoundingClientRect()) === null || _header$getBoundingCl === void 0 ? void 0 : _header$getBoundingCl.height) || 0;
      var footerHeight = (footer === null || footer === void 0 || (_footer$getBoundingCl = footer.getBoundingClientRect()) === null || _footer$getBoundingCl === void 0 ? void 0 : _footer$getBoundingCl.height) || 0;
      var windowHeight = window.innerHeight;
      var contentHeight = windowHeight - headerHeight - footerHeight;
      if (content && content !== null && content !== void 0 && content.style) {
        content.style.height = "".concat(contentHeight, "px");
        content.style.overflowY = 'auto';
      }
    }
  }, [currentStepData === null || currentStepData === void 0 ? void 0 : currentStepData.key]);
  return /*#__PURE__*/React.createElement("div", {
    className: "event-content-wrap ".concat(isMobile() ? 'event-content-mobile-wrap' : '')
  }, /*#__PURE__*/React.createElement("div", {
    className: "event-content-left"
  }, Com), !isMobile() && !isFirstStep ? /*#__PURE__*/React.createElement("div", {
    className: "event-content-right"
  }, /*#__PURE__*/React.createElement(CartItem, null)) : null);
};
export default Layout;