var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import { FocusOn } from "react-focus-on";
import { cn } from "@utils";
import { panelVariants, panelOverlayVariants, panelContainerVariants, cssVisibilityVariants } from "./panelVariants";
// Import the subcomponents at the top of the file
import { PanelHeader } from "./panelHeader";
import { PanelBody } from "./panelBody";
import { PanelFooter } from "./panelFooter";
// Create the base Panel component
const PanelComponent = React.forwardRef((_a, ref) => {
    var { variant = "compact", showPanel = false, toggleVisibilityUsingCss = false, className, children, rtl, portalTarget = typeof document !== "undefined" ? document.body : undefined, shards, onClose } = _a, props = __rest(_a, ["variant", "showPanel", "toggleVisibilityUsingCss", "className", "children", "rtl", "portalTarget", "shards", "onClose"]);
    const panelRef = useRef(null);
    const [shouldRender, setShouldRender] = useState(false);
    // Handle showing/hiding the panel
    useEffect(() => {
        if (showPanel) {
            setShouldRender(true);
        }
        // When toggleVisibilityUsingCss = false, this timeout hides the panel before the slide out animation ends.
        if (shouldRender && !showPanel) {
            setTimeout(() => setShouldRender(false), 490);
        }
    }, [showPanel, shouldRender]);
    // Handle escape key for closing
    useEffect(() => {
        // Esc key handling
        const handleEscClick = (event) => event.code === "Escape" && (onClose === null || onClose === void 0 ? void 0 : onClose());
        const removeListener = () => {
            document.removeEventListener("keydown", handleEscClick, false);
        };
        // Event Listener added for the keypress and click when component mounts
        if (showPanel) {
            document.addEventListener("keydown", handleEscClick, false);
        }
        else {
            removeListener();
        }
        return () => {
            // Event Listener removed for the keypress and click when component unmounts
            removeListener();
        };
    }, [showPanel, onClose]);
    // Using CSS to control visibility
    if (toggleVisibilityUsingCss) {
        return portalTarget ? ReactDOM.createPortal(_jsxs(FocusOn, Object.assign({ as: "div", enabled: showPanel, shards: shards }, rtl ? { dir: "rtl" } : {}, { className: cssVisibilityVariants.container, children: [_jsx("div", { className: cn(cssVisibilityVariants.overlay.base, showPanel && cssVisibilityVariants.overlay.show), onClick: onClose }), children && (_jsx("div", Object.assign({ id: "panel", "aria-modal": "true", role: "dialog", ref: ref || panelRef, className: cn(cssVisibilityVariants.panel.base, variant === "compact"
                        ? cssVisibilityVariants.panel.compact
                        : cssVisibilityVariants.panel.extended, showPanel && (variant === "compact"
                        ? cssVisibilityVariants.panel.show.compact
                        : cssVisibilityVariants.panel.show.extended), className) }, props, { children: children })))] })), portalTarget) : null;
    }
    else {
        return shouldRender && portalTarget ? ReactDOM.createPortal(_jsxs(FocusOn, Object.assign({ as: "div", enabled: showPanel, shards: shards }, rtl ? { dir: "rtl" } : {}, { className: cn(panelContainerVariants()), children: [_jsx("div", { className: cn(panelOverlayVariants({
                        animation: showPanel ? "appear" : "disappear",
                        visibility: showPanel ? "visible" : "hidden"
                    })), onClick: onClose }), children && (_jsx("div", Object.assign({ id: "panel", "aria-modal": "true", role: "dialog", ref: ref || panelRef, className: cn(panelVariants({
                        variant,
                        animation: showPanel ? "slideIn" : "slideOut",
                        visibility: "visible"
                    }), "fixed start-auto end-0", variant === "compact" ? "end-8 inset-y-8" : "inset-y-0", className) }, props, { children: children })))] })), portalTarget) : null;
    }
});
PanelComponent.displayName = "Panel";
// Create the compound component by casting
export const Panel = PanelComponent;
// Attach the subcomponents
Panel.Header = PanelHeader;
Panel.Body = PanelBody;
Panel.Footer = PanelFooter;
//# sourceMappingURL=panel.js.map