import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import classNames from "classnames";
import ChevronRight from "@pisell/icon/es/ChevronRight";
import { useDebounceFn } from "ahooks";
import ChevronLeft from "@pisell/icon/es/ChevronLeft";
import "./index.less";
//#region src/components/booking/components/TabProduct/tabs/index.tsx
const Tabs = ({ renderTab, rowKey, name = "tabs-", onChange, tab, className, options }, ref) => {
	const [isShowButton, setIsShowButton] = useState(true);
	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);
	};
	useEffect(() => {
		if (options === null || options === void 0 ? void 0 : options.length) calculateWidth();
	}, [options]);
	/**
	* @title: 判断是否展示箭头
	* @description:
	* @return {*}
	* @Author: chensheng.gu
	* @Date: 2023-08-01 15:59
	*/
	const calculateWidth = () => {
		const content = document.querySelector("#pisell-tabs");
		const itemList = document.querySelector("#pisell-tabs-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 = useMemo(() => {
		return options || [];
	}, [options]);
	const [leftWidth, setLeftWidth] = useState(0);
	const [rightWidth, setRightWidth] = useState(40);
	const debounceChange = 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("#pisell-tabs-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("#pisell-tabs-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 = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", {
			className: "booking-pisell-tabs-btn-left",
			style: {
				width: leftWidth,
				marginLeft: !leftWidth ? "20px" : 0
			},
			onClick: () => {
				onPageChange("left");
			}
		}, /* @__PURE__ */ React.createElement(ChevronRight, { className: "booking-pisell-tabs-btn-icon" }));
	}, [leftWidth]);
	const rightBtn = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", {
			className: "booking-pisell-tabs-btn-right",
			style: {
				width: rightWidth,
				marginRight: !rightWidth ? "20px" : 0
			},
			onClick: () => {
				onPageChange("right");
			}
		}, /* @__PURE__ */ React.createElement(ChevronLeft, {
			type: "icona-iconArrowsLine",
			className: "booking-pisell-tabs-btn-icon"
		}));
	}, [rightWidth]);
	const content = useMemo(() => {
		return /* @__PURE__ */ React.createElement("div", {
			className: "booking-pisell-tabs-content",
			id: "pisell-tabs-content",
			onScroll
		}, _options.map((d, i) => {
			let _key = rowKey ? d[rowKey] : i;
			return /* @__PURE__ */ React.createElement("div", {
				className: classNames("booking-pisell-tabs-tab", { "booking-pisell-tabs-tab-active": tab === _key }),
				key: _key,
				id: name + "" + _key,
				onClick: (e) => {
					_onChange(_key, d, e);
				}
			}, renderTab ? renderTab(d) : /* @__PURE__ */ React.createElement("div", { className: "booking-pisell-tabs-tab-content" }, d.name));
		}));
	}, [
		_options,
		rowKey,
		name,
		tab
	]);
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("booking-pisell-tabs", className),
		id: "pisell-tabs"
	}, isShowButton && leftBtn, content, isShowButton && rightBtn);
};
var tabs_default = forwardRef(Tabs);
//#endregion
export { tabs_default as default };
