const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_index = require("./tabs/index.js");
const require_index$1 = require("./card/index.js");
const require_index$2 = require("./productItem/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let ahooks = require("ahooks");
require("./index.less");
//#region src/components/booking/components/TabProduct/index.tsx
let io = null;
const TabProduct = (props) => {
	const { list, onChange, amountSymbol = "$", scrollDom } = props;
	const tabsRef = (0, react.useRef)();
	const [current, setCurrent] = (0, react.useState)(1);
	(0, react.useEffect)(() => {
		if (list === null || list === void 0 ? void 0 : list.length) {
			setCurrent(list[0].id);
			handleObserver();
		}
	}, [list]);
	/**
	* @title: 开启监听
	* @description:
	* @return {*}
	* @Author: chensheng.gu
	* @Date: 2023-07-13 16:31
	*/
	const handleObserver = (0, ahooks.useMemoizedFn)(() => {
		const _marginTop = 270;
		const _marginBottom = window.innerHeight - 70 - 200 - 70;
		const _rootMargin = `${_marginTop * -1}px 0px ${_marginBottom * -1}px 0px`;
		io = new IntersectionObserver((entries) => {
			if (entries[0].isIntersecting) {
				var _entries$, _tabsRef$current;
				const [name, id] = (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.target) === null || _entries$ === void 0 || (_entries$ = _entries$.id) === null || _entries$ === void 0 ? void 0 : _entries$.split("-");
				setCurrent(Number(id));
				tabsRef === null || tabsRef === void 0 || (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 || _tabsRef$current.scroll(id);
			}
		}, {
			root: null,
			rootMargin: _rootMargin
		});
		if (list === null || list === void 0 ? void 0 : list.length) for (const item of list) {
			const _item = document.querySelector(`#list-${item.id}`);
			if (_item) io.observe(_item);
		}
	});
	/**
	* @title: 取消监听
	* @description:
	* @return {*}
	* @Author: chensheng.gu
	* @Date: 2023-07-13 16:31
	*/
	const handleUnobserver = (0, ahooks.useMemoizedFn)(() => {
		if ((list === null || list === void 0 ? void 0 : list.length) && io) for (const item of list) {
			const _item = document.querySelector(`#list-${item.id}`);
			if (_item) io.unobserve(_item);
		}
	});
	const onProductClick = (0, ahooks.useMemoizedFn)((productDetail, type) => {
		onChange === null || onChange === void 0 || onChange(productDetail, type);
	});
	return (0, react.useMemo)(() => {
		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "booking-tab-product" }, /* @__PURE__ */ react.default.createElement("div", {
			className: "booking-tabs-wrap",
			style: { top: "67px" }
		}, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
			className: "booking-tabs",
			id: "product-category"
		}, /* @__PURE__ */ react.default.createElement(require_index.default, {
			ref: tabsRef,
			options: list,
			rowKey: "id",
			tab: current,
			onChange: (e) => {
				var _document, _document2;
				let categoryDom = document.querySelector("#product-category");
				let top = 0;
				if (categoryDom) top = categoryDom.offsetHeight + 16;
				const dom = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector("#list-" + e);
				const main = (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector(scrollDom || "");
				if (dom && main) main.scrollTop = dom.offsetTop - top;
				handleUnobserver();
				setCurrent(e);
				setTimeout(() => {
					handleObserver();
				}, 1e3);
			}
		}))), /* @__PURE__ */ react.default.createElement("div", { className: "booking-category-list" }, list.map((d, i) => {
			return /* @__PURE__ */ react.default.createElement("div", {
				className: "booking-category-item",
				id: `list-${d.id}`,
				key: i
			}, /* @__PURE__ */ react.default.createElement("div", { className: "booking-category-title" }, d.name), /* @__PURE__ */ react.default.createElement("div", { className: "booking-product-list" }, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
				className: "booking-card",
				layout: 2
			}, d.products.map((item) => {
				return /* @__PURE__ */ react.default.createElement(require_index$2.default, {
					key: item.id,
					item,
					onClick: onProductClick,
					amountSymbol
				});
			}))));
		}))));
	}, [
		list,
		current,
		amountSymbol
	]);
};
//#endregion
exports.default = TabProduct;
