import { __assign, __rest } from "tslib";
import React, { forwardRef, useRef } from "react";
import { useTabContext } from "../TabContext";
import { TabPanelStyled } from "./styles";
var TabPanel = forwardRef(function (_a, ref) {
    var children = _a.children, style = _a.style, className = _a.className, value = _a.value, _b = _a.isKeepAlive, isKeepAlive = _b === void 0 ? false : _b, props = __rest(_a, ["children", "style", "className", "value", "isKeepAlive"]);
    var context = useTabContext();
    var isLoaded = useRef(false);
    if (context === null) {
        throw new Error("No TabContext provided");
    }
    var isTabActive = value === context.value;
    if (isKeepAlive) {
        if (context.isLazy && !isLoaded.current && !isTabActive) {
            return null;
        }
        if (!isLoaded.current) {
            isLoaded.current = true;
        }
    }
    else {
        if (context.isLazy && !isTabActive) {
            return null;
        }
    }
    return (React.createElement(TabPanelStyled, __assign({ ref: ref, isHidden: !isTabActive, role: "tabpanel", style: style, className: className }, props), children));
});
TabPanel.displayName = "TabPanel";
export default TabPanel;
