import tabs_default from "./tabs/index.js";
import Card from "./card/index.js";
import React, { useEffect, useRef, useState } from "react";
import classNames from "classnames";
import "./index.less";
//#region src/components/tabProduct/index.tsx
let io = null;
const tabsHeight = 92;
const TabProduct = (props) => {
	const { list = [], scrollDom, rowKey = "id", tabsWrapClassName, categoryWrapClassName, listWrapClassName, renderItem, warpClassName, stickyTop = 0, name } = props;
	const tabsRef = useRef();
	const [current, setCurrent] = useState(1);
	useEffect(() => {
		if (list === null || list === void 0 ? void 0 : list.length) {
			setCurrent(list[0][rowKey]);
			handleObserver();
		}
	}, [list]);
	const handleObserver = () => {
		var _document$querySelect;
		const domHeight = scrollDom ? ((_document$querySelect = document.querySelector(scrollDom)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || window.innerHeight : window.innerHeight;
		const marginTop = `-${tabsHeight}px`;
		const marginBottom = `-${domHeight - tabsHeight - 10}px`;
		io = new IntersectionObserver((entries) => {
			console.log(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: scrollDom ? document.querySelector(scrollDom) : null,
			rootMargin: `${marginTop} 0px ${marginBottom}`
		});
		if (list === null || list === void 0 ? void 0 : list.length) for (const item of list) {
			const _item = document.querySelector(`#list-${item[rowKey]}`);
			if (_item) io.observe(_item);
		}
	};
	const handleUnObserver = () => {
		if ((list === null || list === void 0 ? void 0 : list.length) && io) for (const item of list) {
			const _item = document.querySelector(`#list-${item[rowKey]}`);
			if (_item) io.unobserve(_item);
		}
	};
	return /* @__PURE__ */ React.createElement("div", { className: classNames("tab-product", warpClassName) }, /* @__PURE__ */ React.createElement("div", {
		className: "tabs-wrap",
		style: { top: stickyTop }
	}, /* @__PURE__ */ React.createElement(Card, {
		className: classNames("tabs", tabsWrapClassName),
		id: `${name || "product"}-category`
	}, /* @__PURE__ */ React.createElement(tabs_default, {
		ref: tabsRef,
		options: list,
		rowKey,
		tab: current,
		name,
		onChange: (e) => {
			var _document, _document2;
			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 - 42;
			handleUnObserver();
			setCurrent(e);
			setTimeout(() => {
				handleObserver();
			}, 1e3);
		}
	}))), /* @__PURE__ */ React.createElement("div", { className: classNames("category-list", categoryWrapClassName) }, list.map((d, i) => {
		return /* @__PURE__ */ React.createElement("div", {
			className: "category-item",
			id: `list-${d[rowKey]}`,
			key: i
		}, /* @__PURE__ */ React.createElement("div", { className: "category-title" }, d.name), /* @__PURE__ */ React.createElement("div", { className: classNames("product-list", listWrapClassName) }, d.products.map((item, index) => {
			if (renderItem) return renderItem(item);
			return /* @__PURE__ */ React.createElement("div", { key: index }, index);
		})));
	})));
};
//#endregion
export { TabProduct as default };
