import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { cn } from "../libs/utils";
import { X } from "lucide-react";
import { Button } from "./button";
import { VisuallyHidden } from "../libs/visuallyHidden";
import { createContext, useContext } from "react";
const ModalContext = createContext(false);
export function useIsInModal() {
    return !!useContext(ModalContext);
}
export function ModalContextProvider({ children }) {
    return _jsx(ModalContext.Provider, { value: true, children: children });
}
export function VModal({ className, children, isOpen, onClose, description = "Modal Description", noCloseButton = false, allowOverflow = false, disableCloseOnClickOutside = false, }) {
    const handleOpenChange = (open) => {
        if (!open) {
            onClose();
        }
    };
    return (_jsxs(Dialog, { open: isOpen, onOpenChange: (open) => {
            if (!disableCloseOnClickOutside || open) {
                handleOpenChange(open);
            }
        }, children: [allowOverflow && _jsx(DialogOverlay, { className: "z-50 fixed inset-0 bg-black/80" }), _jsx(VisuallyHidden, { children: _jsx(DialogDescription, { children: description }) }), _jsxs(DialogContent, { className: cn("min-h-20 p-4", "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 sm:rounded-lg", className), children: [!noCloseButton && (_jsx(DialogClose, { onClick: () => handleOpenChange(false), asChild: true, autoFocus: false, children: _jsx(Button, { variant: "outline", alt: "Close", className: "top-4 right-4 absolute data-[state=open]:bg-accent opacity-70 hover:opacity-100 rounded-sm focus:outline-none focus:ring-2 focus:ring-ring ring-offset-background focus:ring-offset-2 data-[state=open]:text-muted-foreground transition-opacity disabled:pointer-events-none", children: _jsx(X, { className: "w-4 h-4" }) }) })), _jsx(ModalContextProvider, { children: children })] })] }));
}
export const VModalTitle = ({ children, show = true, className, description, ...props }) => {
    if (!show) {
        return (_jsxs(VisuallyHidden, { children: [_jsx(DialogTitle, { children: children }), description && _jsx(DialogDescription, { children: description })] }));
    }
    return (_jsx(_Fragment, { children: _jsxs(DialogTitle, { className: cn("text-lg font-semibold leading-6 tracking-tight", { 'py-2': !description }, className), ...props, children: [children, description && (_jsx(DialogDescription, { className: "text-sm !font-normal text-muted-foreground pb-2", children: description }))] }) }));
};
export const VModalBody = ({ children, className, ...props }) => {
    return (_jsx("div", { className: cn("text-sm max-h-[80vh] overflow-y-auto", className), ...props, children: children }));
};
export const VModalFooter = ({ align = "right", children, className, ...props }) => {
    const alignClass = {
        left: "justify-start",
        center: "justify-center",
        right: "justify-end",
    };
    return (_jsx("div", { className: cn("w-full flex py-3 sm:py-2 sm:flex sm:flex-row-reverse sm:flex-row sm:justify-end sm:space-x-2", alignClass[align], className), ...props, children: children }));
};
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(DialogPrimitive.Content, { ref: ref, autoFocus: false, onOpenAutoFocus: (event) => {
                event.preventDefault();
            }, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: children })] })));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted", className), ...props })));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogTitle, DialogDescription, };
//# sourceMappingURL=dialog.js.map