const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
let react = require("react");
react = require_runtime.__toESM(react);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let _pisell_icon_es_ChevronRight = require("@pisell/icon/es/ChevronRight");
_pisell_icon_es_ChevronRight = require_runtime.__toESM(_pisell_icon_es_ChevronRight);
let ahooks = require("ahooks");
let _pisell_icon_es_ChevronLeft = require("@pisell/icon/es/ChevronLeft");
_pisell_icon_es_ChevronLeft = require_runtime.__toESM(_pisell_icon_es_ChevronLeft);
require("./index.less");
//#region src/components/tabProduct/tabs/index.tsx
const Tabs = ({ renderTab, rowKey, name = "tabs-", onChange, tab, className, options }, ref) => {
	const [isShowButton, setIsShowButton] = (0, react.useState)(true);
	(0, react.useImperativeHandle)(ref, () => {
		return { scroll: (tab) => {
			if (tab) {
				const dom = document.querySelector(`#${name}${tab}`);
				if (dom) setTabScroll(dom === null || dom === void 0 ? void 0 : dom.offsetLeft);
			}
		} };
	});
	/**
	* @Title: 改变tab事件
	* @Describe:
	* @Author: Wzw
	* @param {RowKey} _key
	*/
	const _onChange = (_key, _item, e) => {
		if (onChange) onChange(_key, _item);
		setTabScroll(e.target.offsetLeft);
	};
	(0, react.useEffect)(() => {
		if (options === null || options === void 0 ? void 0 : options.length) calculateWidth();
	}, [options]);
	/**
	* @title: 一个页面多个tab，id会重复
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: WangHan
	* @Date: 2024-07-30 11:02
	*/
	const _id = (0, react.useMemo)(() => {
		return name ? `pisell-${name}-tabs` : "pisell-tabs";
	}, [name]);
	/**
	* @title: 判断是否展示箭头
	* @description:
	* @return {*}
	* @Author: chensheng.gu
	* @Date: 2023-08-01 15:59
	*/
	const calculateWidth = () => {
		const content = document.querySelector(`#${_id}`);
		const itemList = document.querySelector(`#${_id}-content`);
		if ((itemList === null || itemList === void 0 ? void 0 : itemList.offsetWidth) + 60 < (content === null || content === void 0 ? void 0 : content.offsetWidth)) setIsShowButton(false);
	};
	/**
	* @title: 选项
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2023-06-03 10:44
	*/
	const _options = (0, react.useMemo)(() => {
		return options || [];
	}, [options]);
	const [leftWidth, setLeftWidth] = (0, react.useState)(0);
	const [rightWidth, setRightWidth] = (0, react.useState)(40);
	const debounceChange = (0, ahooks.useDebounceFn)(({ current, total }) => {
		if (current === 0) setLeftWidth(0);
		else setLeftWidth(40);
		if (current + 10 >= total) setRightWidth(0);
		else setRightWidth(40);
	}, { wait: 200 });
	const onScroll = (e) => {
		let total = e.target.scrollWidth - e.target.clientWidth;
		let current = e.target.scrollLeft;
		debounceChange.run({
			current,
			total
		});
	};
	const setTabScroll = (val) => {
		let dom = document.querySelector(`#${_id}-content`);
		console.log("domdom", dom);
		if (!dom) return;
		dom.scrollLeft = val;
	};
	/**
	* @title: 手动触发滚动位置
	* @description:
	* @param {*} type
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2023-06-03 10:45
	*/
	const onPageChange = (type) => {
		let dom = document.querySelector(`#${_id}-content`);
		if (!dom) return;
		if (type === "left") setTabScroll((dom === null || dom === void 0 ? void 0 : dom.scrollLeft) - dom.clientWidth / 2);
		else setTabScroll((dom === null || dom === void 0 ? void 0 : dom.scrollLeft) + dom.clientWidth / 2);
	};
	const leftBtn = (0, react.useMemo)(() => {
		return /* @__PURE__ */ react.default.createElement("div", {
			className: "pisell-tabs-btn-left",
			style: { width: leftWidth },
			onClick: () => {
				onPageChange("left");
			}
		}, /* @__PURE__ */ react.default.createElement(_pisell_icon_es_ChevronLeft.default, { className: "pisell-tabs-btn-icon" }));
	}, [leftWidth]);
	const rightBtn = (0, react.useMemo)(() => {
		if (!(options === null || options === void 0 ? void 0 : options.length)) return null;
		return /* @__PURE__ */ react.default.createElement("div", {
			className: "pisell-tabs-btn-right",
			style: {
				width: rightWidth,
				marginRight: !rightWidth ? "20px" : 0
			},
			onClick: () => {
				onPageChange("right");
			}
		}, /* @__PURE__ */ react.default.createElement(_pisell_icon_es_ChevronRight.default, { className: "pisell-tabs-btn-icon" }));
	}, [rightWidth, options]);
	const content = (0, react.useMemo)(() => {
		return /* @__PURE__ */ react.default.createElement("div", {
			className: "pisell-tabs-content",
			id: `${_id}-content`,
			onScroll
		}, _options.map((d, i) => {
			let _key = rowKey ? d[rowKey] : i;
			return /* @__PURE__ */ react.default.createElement("div", {
				className: (0, classnames.default)("pisell-tabs-tab", { "pisell-tabs-tab-active": tab === _key }),
				key: _key,
				id: name + "" + _key,
				onClick: (e) => {
					_onChange(_key, d, e);
				}
			}, renderTab ? renderTab(d) : /* @__PURE__ */ react.default.createElement("div", { className: "pisell-tabs-tab-content" }, d.name));
		}));
	}, [
		_options,
		rowKey,
		name,
		tab
	]);
	return /* @__PURE__ */ react.default.createElement("div", {
		className: (0, classnames.default)("pisell-tabs", className),
		id: _id
	}, isShowButton && leftBtn, content, isShowButton && rightBtn);
};
var tabs_default = (0, react.forwardRef)(Tabs);
//#endregion
exports.default = tabs_default;
