'use client';


import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
import { Container } from "../Container/index.mjs";
import { useDevice } from "../../hooks/useDevice.mjs";
import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
import { useRightDrawerStore } from "./useRightDrawerStore.mjs";
import { ChevronLeft, X } from "lucide-react";
import { useEffect, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/RightDrawer/RightDrawer.tsx
/**
* RightDrawer - A slide-out drawer panel that appears from the right side of the screen
*
* A versatile drawer component that provides an overlay panel for displaying secondary content,
* forms, details, or navigation. Features responsive design that adapts to mobile devices,
* configurable close behavior, and integrated state management through Zustand store.
*
* ## Key Features
* - **Responsive Design**: Full-width on mobile, fixed 400px width on desktop
* - **State Management**: Built-in Zustand store for managing multiple drawer instances
* - **Accessibility**: Proper ARIA attributes, keyboard navigation, and focus management
* - **Flexible Layout**: Customizable header, title, and content areas
* - **Click Outside**: Configurable outside click detection for auto-closing
* - **Scroll Management**: Automatic body scroll blocking when open
*
* ## Use Cases
* - Navigation menus and sidebars
* - Detail panels and forms
* - Settings and configuration interfaces
* - Shopping carts and checkout processes
* - User profiles and account management
* - Multi-step workflows and wizards
*
* ## Accessibility
* - **Focus Management**: Traps focus within the drawer when open
* - **Keyboard Navigation**: Escape key closes the drawer
* - **Screen Reader Support**: Proper ARIA labels and announcements
* - **Touch Support**: Mobile-optimized touch interactions
*
* ## State Management
* The component uses a Zustand store (`useRightDrawerStore`) to manage drawer state:
* - Multiple drawers can be managed simultaneously using unique identifiers
* - External components can open/close drawers using the store
* - Supports both controlled (via props) and uncontrolled (via store) patterns
*
* @example
* Basic usage with store management:
* ```tsx
* // Opening the drawer from another component
* const { open } = useRightDrawerStore();
*
* <button onClick={() => open('user-menu')}>
*   Open Menu
* </button>
*
* <RightDrawer identifier="user-menu" title="User Menu">
*   <nav>Navigation items here</nav>
* </RightDrawer>
* ```
*
* @example
* Controlled drawer with external state:
* ```tsx
* const [showDrawer, setShowDrawer] = useState(false);
*
* <RightDrawer
*   identifier="controlled-drawer"
*   title="Settings"
*   isOpen={showDrawer}
*   onClose={() => setShowDrawer(false)}
*   closeOnOutsideClick={false}
* >
*   <SettingsForm onSave={() => setShowDrawer(false)} />
* </RightDrawer>
* ```
*
* @example
* Complex drawer with back button and header:
* ```tsx
* <RightDrawer
*   identifier="product-detail"
*   title="Product Details"
*   header={
*     <div className="text-sm text-gray-600">
*       SKU: {product.sku} | Stock: {product.stock}
*     </div>
*   }
*   backButton={{
*     text: "Back to Catalog",
*     onBack: () => navigate('/catalog')
*   }}
* >
*   <ProductDetailView product={product} />
* </RightDrawer>
* ```
*/
const RightDrawer = ({ title, identifier, children, header, closeOnOutsideClick = true, backButton, isOpen: isOpenProp, onClose }) => {
	const { isMobile } = useDevice("md");
	const panelRef = useRef(null);
	const childrenContainerRef = useRef(null);
	const openDrawer = useRightDrawerStore((s) => s.open);
	const closeDrawer = useRightDrawerStore((s) => s.close);
	const storeIsOpen = useRightDrawerStore((s) => s.isOpen(identifier));
	const isOpen = useRightDrawerStore((s) => s.isOpen(identifier));
	useScrollBlockage({
		disableScroll: isOpen,
		key: identifier ? `right_drawer_${identifier}` : "right_drawer"
	});
	useEffect(() => {
		const handleClickOutside = (event) => {
			try {
				if (!panelRef.current) return;
				const isClickAble = isOpen && closeOnOutsideClick;
				const isClickOutside = event.target && !panelRef.current.contains(event.target);
				const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);
				if (isClickAble && isClickOutside && isAtTopAndVisible || !event.target) {
					closeDrawer(identifier);
					onClose?.();
				}
			} catch (_e) {
				closeDrawer(identifier);
				onClose?.();
			}
		};
		window.addEventListener("mousedown", handleClickOutside);
		return () => window.removeEventListener("mousedown", handleClickOutside);
	}, [
		isOpen,
		closeDrawer,
		onClose,
		closeOnOutsideClick,
		identifier
	]);
	const onCloseRef = useRef(onClose);
	useEffect(() => {
		onCloseRef.current = onClose;
	}, [onClose]);
	useEffect(() => {
		if (isOpenProp === void 0) return;
		if (isOpenProp === storeIsOpen) return;
		if (isOpenProp) openDrawer(identifier);
		else {
			closeDrawer(identifier);
			onCloseRef.current?.();
		}
	}, [
		isOpenProp,
		storeIsOpen,
		identifier,
		openDrawer,
		closeDrawer
	]);
	const handleSpareSpaceClick = (e) => {
		if (e.target !== e.currentTarget) return;
		if (isMobile) {
			closeDrawer(identifier);
			onClose?.();
		}
	};
	return /* @__PURE__ */ jsx("div", {
		className: "fixed top-0 right-0 z-50 flex h-full justify-end",
		children: /* @__PURE__ */ jsx(MaxWidthSmoother, {
			isHidden: !isOpen,
			align: "right",
			children: /* @__PURE__ */ jsxs(Container, {
				className: "relative flex h-screen w-screen flex-col text-text md:w-[400px]",
				ref: panelRef,
				roundedSize: "none",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-3 p-6",
					children: [
						/* @__PURE__ */ jsxs("div", {
							className: "flex justify-between gap-3",
							children: [/* @__PURE__ */ jsx("div", { children: backButton && /* @__PURE__ */ jsx(Button, {
								variant: ButtonVariant.HOVERABLE,
								color: ButtonColor.TEXT,
								label: backButton.text ?? "Go back",
								onClick: backButton.onBack,
								Icon: ChevronLeft,
								children: backButton?.text
							}) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
								variant: ButtonVariant.HOVERABLE,
								color: ButtonColor.TEXT,
								label: "Close",
								className: "ml-auto",
								onClick: () => {
									closeDrawer(identifier);
									onClose?.();
								},
								Icon: X,
								size: ButtonSize.ICON_MD
							}) })]
						}),
						title && /* @__PURE__ */ jsx("h2", {
							className: "flex items-center justify-center font-bold text-lg",
							children: title
						}),
						header
					]
				}), /* @__PURE__ */ jsx("div", {
					className: "flex h-full flex-col overflow-y-auto p-2",
					children: /* @__PURE__ */ jsx("div", {
						className: "flex flex-1 flex-col",
						onClick: handleSpareSpaceClick,
						ref: childrenContainerRef,
						role: "region",
						children
					})
				})]
			})
		})
	});
};

//#endregion
export { RightDrawer };
//# sourceMappingURL=RightDrawer.mjs.map