'use client';

import { Container } from "../Container/index.mjs";
import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
import { useDevice } from "../../hooks/useDevice.mjs";
import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
import { Popover } from "../Popover/dynamic.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";
import { useIntlayer } from "react-intlayer";

//#region src/components/RightDrawer/RightDrawer.tsx
const RightDrawer = ({ title, identifier, children, header, footer, closeOnOutsideClick = true, backButton, isOpen: isOpenProp, onClose }) => {
	const content = useIntlayer("right-drawer");
	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?.();
		}
	};
	const handleSpareSpaceKeyDown = (e) => {
		if (e.target !== e.currentTarget) return;
		if (e.key === "Enter" || e.key === " ") {
			e.preventDefault();
			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 shrink-0 flex-col gap-3 px-6 pt-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 ?? content.goBack.value,
									onClick: backButton.onBack,
									Icon: ChevronLeft,
									children: backButton?.text
								}) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Popover, {
									identifier: "close-drawer",
									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
									}), /* @__PURE__ */ jsx(Popover.Detail, {
										identifier: "close-drawer",
										children: /* @__PURE__ */ jsxs("div", {
											className: "flex items-center gap-2 p-2",
											children: [/* @__PURE__ */ jsx("span", {
												className: "whitespace-nowrap text-neutral text-xs",
												children: content.closeDrawer
											}), /* @__PURE__ */ jsx(KeyboardShortcut, {
												shortcut: "Escape",
												size: "sm",
												onTriggered: () => {
													closeDrawer(identifier);
													onClose?.();
												}
											})]
										})
									})]
								}) })]
							}),
							title && /* @__PURE__ */ jsx("h2", {
								className: "flex items-center justify-center font-bold text-lg",
								children: title
							}),
							header
						]
					}),
					/* @__PURE__ */ jsx("div", {
						className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-2",
						children: /* @__PURE__ */ jsx("div", {
							className: "flex flex-1 flex-col outline-none",
							onClick: handleSpareSpaceClick,
							onKeyDown: handleSpareSpaceKeyDown,
							ref: childrenContainerRef,
							role: "button",
							tabIndex: 0,
							children
						})
					}),
					footer && /* @__PURE__ */ jsx("div", {
						className: "shrink-0",
						children: footer
					})
				]
			})
		})
	});
};

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