"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Tabs", {
    enumerable: true,
    get: function() {
        return Tabs;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
const _tabList = require("./tabList");
const _tabContext = require("./tabContext");
const _tabContent = require("./tabContent");
const _tabGroup = require("../tab/tabGroup");
const _constants = require("./constants");
function _getRequireWildcardCache(nodeInterop) {
    if (typeof WeakMap !== "function") return null;
    var cacheBabelInterop = new WeakMap();
    var cacheNodeInterop = new WeakMap();
    return (_getRequireWildcardCache = function(nodeInterop) {
        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
    })(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
    if (!nodeInterop && obj && obj.__esModule) {
        return obj;
    }
    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
        return {
            default: obj
        };
    }
    var cache = _getRequireWildcardCache(nodeInterop);
    if (cache && cache.has(obj)) {
        return cache.get(obj);
    }
    var newObj = {
        __proto__: null
    };
    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
    for(var key in obj){
        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
            if (desc && (desc.get || desc.set)) {
                Object.defineProperty(newObj, key, desc);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    newObj.default = obj;
    if (cache) {
        cache.set(obj, newObj);
    }
    return newObj;
}
// it's controlled component;
const TabsInner = ({ showIdentifier = true, collapsed = false, onToggleCollapsed, ...props }, ref)=>{
    const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
    const [viewMode, setViewMode] = (0, _react.useState)(_constants.TabViewMode.Tab);
    const [height, setHeight] = (0, _react.useState)({
        box: 0,
        header: 0,
        content: 0
    });
    const [tabList, children] = (0, _react.useMemo)(()=>{
        const tabList = [], children = [];
        _react.default.Children.forEach(props.children, (child, index)=>{
            const childElement = child;
            const { displayName } = childElement.type;
            //
            if (displayName === "TabPane") {
                //   return childElement;
                const { title, value, disabled } = childElement.props;
                // const active = value === props.value;
                tabList.push({
                    title,
                    value,
                    disabled
                });
                // children.push(
                //   <Fragment key={index}>{childElement.props.children}</Fragment>
                // );
                children.push(childElement);
            // set active index
            // if (active) {
            //   setActiveIndex(index);
            // }
            } else {
                console.error("Warning: Tabs has a child which is not a TabPane component");
            }
        });
        return [
            tabList,
            children
        ];
    }, [
        props.children
    ]);
    (0, _react.useEffect)(()=>{
        const index = tabList.findIndex((tab)=>{
            return tab.value === props.value;
        });
        if (index !== -1) {
            setActiveIndex(index);
        }
    }, [
        props.value,
        tabList
    ]);
    // const child = useMemo(() => {
    //   return children[activeIndex];
    // }, [children, activeIndex]);
    const containerRef = (0, _react.useRef)(null);
    const tabHeaderRef = (0, _react.useRef)(new WeakMap());
    (0, _react.useEffect)(()=>{
        if (typeof props.minWidth !== "number" || !props.allowUngroup || children?.length === 0) {
            return;
        }
        const observer = new ResizeObserver(function(entries) {
            if (Array.isArray(entries) && entries[0]) {
                const target = entries[0];
                if (target.contentRect.width > props.minWidth * children.length * 0.8) {
                    setViewMode(_constants.TabViewMode.Group);
                } else {
                    setViewMode(_constants.TabViewMode.Tab);
                }
            }
        });
        observer.observe(containerRef.current);
        return ()=>{
            if (containerRef.current) {
                observer.unobserve(containerRef.current);
            }
        };
    }, [
        props.allowUngroup,
        props.minWidth,
        children.length
    ]);
    (0, _react.useEffect)(()=>{
        if (!props.autoFit) {
            return;
        }
        if (!containerRef.current) {
            return;
        }
        const parent = containerRef.current.parentElement;
        if (parent === null) {
            return;
        }
        const observer = new ResizeObserver(function(entries) {
            if (Array.isArray(entries) && entries[0]) {
                // const parentBounding = parent.getBoundingClientRect();
                const target = entries[0];
                const height = target.contentRect.height;
                const header = containerRef.current.querySelector(".orderly-tab-header");
                if (!header) return;
                let headerHeight = tabHeaderRef.current.get(header);
                if (!headerHeight) {
                    const height = header.getBoundingClientRect().height;
                    tabHeaderRef.current.set(header, height);
                    headerHeight = height;
                }
                // if (header === null) {
                //   return;
                // }
                if (!tabHeaderRef.current) {
                    return;
                }
                setHeight((rect)=>({
                        box: height,
                        header: headerHeight,
                        content: height - headerHeight
                    }));
            }
        });
        observer.observe(parent);
        return ()=>{
            observer.unobserve(parent);
        };
    }, []);
    (0, _react.useImperativeHandle)(ref, ()=>{
        return {
            getContainer: ()=>containerRef.current
        };
    });
    // console.log("-----tabs render-----");
    const tabHeader = viewMode === _constants.TabViewMode.Tab ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_tabList.TabList, {
        mode: viewMode,
        tabs: tabList,
        onTabChange: props.onTabChange,
        value: props.value,
        tabBarExtra: props.tabBarExtra,
        showIdentifier: showIdentifier,
        className: props.tabBarClassName,
        fullWidth: props.fullWidth,
        identifierClassName: props.identifierClassName
    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_tabGroup.TabGroup, {
        tabList: tabList,
        className: props.tabBarClassName
    });
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_tabContext.TabContextProvider, {
        data: props.extraData,
        collapsed: collapsed,
        onToggleCollapsed: onToggleCollapsed,
        height: height,
        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
            id: props.id,
            ref: containerRef,
            className: "orderly-min-h-0 orderly-max-h-full",
            children: [
                tabHeader,
                /*#__PURE__*/ (0, _jsxruntime.jsx)(_tabContent.MemorizedTabContent, {
                    mode: viewMode,
                    activeIndex: activeIndex,
                    tabs: children,
                    keepAlive: props.keepAlive
                })
            ]
        })
    });
};
const Tabs = /*#__PURE__*/ (0, _react.forwardRef)(TabsInner);

//# sourceMappingURL=tabs.js.map