'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useEffect } from 'react';
import { XIcon, Play, Square } from 'lucide-react';
import { cva } from 'class-variance-authority';
import { cn } from '../../../lib/utils.js';
import { ActionButton } from '../../common/action-button/index.js';
import { DeploymentStatusBadge } from '../../common/deployment-status-badge/index.js';
import { Drawer, DrawerContent, DrawerHeader, DrawerFooter, DrawerOverlay, DrawerTitle, DrawerDescription, } from '../../ui/drawer.js';
import { Separator } from '../../ui/separator.js';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
import { useTranslation } from 'react-i18next';
import { useDeployAction } from '../../../hooks/use-deploy-action.js';
import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
const drawerVariants = cva('', {
    variants: {
        size: {
            sm: 'w-96',
            md: 'w-2xl',
            lg: 'w-[772px]',
        },
    },
    defaultVariants: {
        size: 'sm',
    },
});
export function BaseDrawer({ open, onClose, modal = false, dismissOnOutsideClick = false, title = 'Drawer', size, header, children, footer, className, 'data-testid': testId, deployTarget, }) {
    const { i18n } = useTranslation();
    const featureFlags = useFeatureFlags();
    const contentRef = useRef(null);
    const drawerDirection = i18n.dir() === 'rtl' ? 'left' : 'right';
    // Close when clicking outside the drawer panel (no overlay needed — canvas stays draggable).
    // Uses `click` (not `pointerdown`) so canvas drags don't trigger this.
    useEffect(() => {
        if (!open || modal)
            return;
        const handleClick = (e) => {
            const target = e.target;
            // If the clicked element was unmounted by React before the event reached
            // the document (e.g. a "Next" button removed on the last step), it is no
            // longer in the DOM tree — treat it as an internal click, not an outside one.
            if (!document.body.contains(target))
                return;
            if (contentRef.current?.contains(target))
                return;
            // Don't close when clicking inside Radix overlays.
            // When dismissOnOutsideClick is false (default), also respect data-no-drawer-close guards.
            const ignoreSelector = dismissOnOutsideClick
                ? '[role="alertdialog"], [role="dialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper]'
                : '[data-no-drawer-close], [role="alertdialog"], [role="dialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper]';
            if (target.closest(ignoreSelector))
                return;
            onClose();
        };
        document.addEventListener('click', handleClick);
        return () => document.removeEventListener('click', handleClick);
    }, [open, modal, onClose, dismissOnOutsideClick]);
    return (_jsxs(Drawer, { direction: drawerDirection, modal: modal, handleOnly: true, open: open, onOpenChange: (isOpen) => {
            if (!isOpen)
                onClose();
        }, children: [modal ? _jsx(DrawerOverlay, {}) : null, _jsxs(DrawerContent, { ref: contentRef, direction: drawerDirection, showCloseButton: false, className: cn(drawerVariants({ size }), 'bg-white/85 backdrop-blur-xl dark:bg-neutral-800/85', className), "data-testid": testId, onInteractOutside: modal ? undefined : (e) => e.preventDefault(), children: [_jsx(DrawerTitle, { asChild: true, children: _jsx("span", { className: "sr-only", children: title }) }), _jsx(DrawerDescription, { asChild: true, children: _jsx("span", { className: "sr-only", children: title }) }), _jsxs("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "ring-offset-background focus:ring-ring absolute end-3 top-2 z-50 rounded-sm p-1 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden", "data-testid": testId ? `${testId}-close-button` : undefined, children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }), header ? _jsx(DrawerHeader, { className: "shrink-0", children: header }) : null, header ? _jsx(Separator, {}) : null, featureFlags.envDeploy && deployTarget ? _jsx(DeployBar, { deployTarget: deployTarget }) : null, _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: children }), footer ? _jsx(DrawerFooter, { className: "shrink-0", children: footer }) : null] })] }));
}
function DeployBar({ deployTarget }) {
    const deployAction = useDeployAction(deployTarget);
    const isDeploymentActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
    return (_jsxs("div", { "data-testid": "base-drawer-deploy-bar", className: "flex items-center gap-2 px-4 pt-3 pb-3", children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { children: _jsx(ActionButton, { label: isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server', onClick: isDeploymentActive ? deployAction.stop : deployAction.deploy, loading: deployAction.deployLoading || deployAction.stopLoading, error: !!deployAction.deployError, icon: isDeploymentActive ? Square : Play, iconOnly: true, variant: "outline", size: "icon-sm" }) }) }), _jsx(TooltipContent, { children: isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server' })] }) }), isDeploymentActive ? (_jsx(DeploymentStatusBadge, { status: deployAction.status, url: deployAction.url, targetId: deployTarget.targetId })) : null] }));
}
