"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
const require_components_Button = require("./Button.cjs");
const require_styles_tokens_spacing = require("../styles/tokens/spacing.cjs");
const require_hooks_useIOSScrollLock = require("../hooks/useIOSScrollLock.cjs");
const require_hooks_useKeyboardOffset = require("../hooks/useKeyboardOffset.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/Drawer.tsx
const Drawer = (props) => {
	const [isOpen, setIsOpen] = (0, react.useState)(true);
	const [lastY, setLastY] = (0, react.useState)(null);
	const [totalDeltaY, setTotalDeltaY] = (0, react.useState)(0);
	const [fractionVisible, setFractionVisible] = (0, react.useState)(1);
	const [grabbing, setGrabbing] = (0, react.useState)(false);
	const drawerContainerRef = (0, react.useRef)(null);
	require_hooks_useIOSScrollLock.useIOSScrollLock();
	const keyboardOffset = require_hooks_useKeyboardOffset.useKeyboardOffset();
	const handleClose = () => {
		if (props.nonDismissable) return;
		setIsOpen(false);
		setTimeout(() => {
			props.onClose && props.onClose();
			setTotalDeltaY(0);
			setLastY(null);
		}, 300);
	};
	const handleTouchMove = (event) => {
		if (props.nonDismissable || props.disableTouchMove) return;
		if (lastY === null) setLastY(event.touches[0].clientY);
		else {
			const deltaY = event.touches[0].clientY - lastY;
			const topOfDrawer = (drawerContainerRef.current?.getBoundingClientRect().top || 0) + window.scrollY;
			const drawerContainerHeight = drawerContainerRef.current?.getBoundingClientRect().height || 1;
			setFractionVisible(Math.min(1, (window.innerHeight - topOfDrawer) / drawerContainerHeight));
			setLastY(event.touches[0].clientY);
			setTotalDeltaY((prev) => Math.max(prev + deltaY, 0));
		}
	};
	const handleTouchStart = () => {
		if (props.nonDismissable || props.disableTouchMove) return;
		setGrabbing(true);
	};
	const handleTouchEnd = () => {
		if (props.nonDismissable || props.disableTouchMove) return;
		setGrabbing(false);
		if (fractionVisible < .8) handleClose();
		setTotalDeltaY(0);
		setLastY(null);
	};
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Background, {
		isOpen,
		fractionVisible,
		onClick: handleClose,
		onTouchMove: (e) => e.preventDefault()
	}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DrawerContainer, {
		isOpen,
		onTouchMove: handleTouchMove,
		onTouchStart: handleTouchStart,
		onTouchEnd: handleTouchEnd,
		totalDeltaY,
		grabbing,
		ref: drawerContainerRef,
		keyboardOffset,
		"data-drawer-scrollable": true,
		top: props.top,
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(DrawerInnerContainer, {
			kind: props.kind,
			padding: props.padding,
			alignBottom: props.alignBottom,
			children: [
				props.grabber && !props.nonDismissable && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Grabber, {
					onClick: handleClose,
					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(GrabberBar, {})
				}),
				props.handleBack && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(BackButtonContainer, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
					onClick: props.handleBack,
					icon: { name: "ChevronLeft" },
					kind: "ghost",
					size: "Small"
				}) }),
				props.closeButton && !props.nonDismissable && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CloseButtonContainer, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CloseButton, {
					onClick: handleClose,
					type: "button",
					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
						name: "CentralCrossLarge",
						square: true,
						width: 16,
						color: "grayBlue43"
					})
				}) }),
				props.children
			]
		})
	})] });
};
const Background = _emotion_styled.default.div`
  position: fixed;
  inset: 0;
  max-height: 100dvh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: ${require_styles_z_index.z.modalOverlay};

  // Animate opacity
  transition: opacity 0.3s ease-in-out;
  opacity: ${(props) => props.isOpen ? props.fractionVisible : "0"};

  animation: open 0.3s ease-in-out;

  @keyframes open {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;
const DrawerContainer = _emotion_styled.default.div`
  position: fixed;
  max-height: 100dvh;
  width: 100%;
  bottom: ${(props) => props.keyboardOffset ?? 0}px;
  transform: translateY(${(props) => `${props.totalDeltaY}px`});
  z-index: ${require_styles_z_index.z.modalContainer};
  display: flex;
  flex-direction: column;
  align-items: center;
  ${(props) => props.top && `top: ${props.top}px;`}

  // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
  ${(props) => props.grabbing && props.isOpen ? "" : "transition: transform 0.3s ease-in-out;"};

  // Animate the drawer opening and closing, and make sure the the drawer stays closed.
  animation: 0.3s ease-in-out
    ${(props) => props.isOpen ? "openDrawer" : "closeDrawer forwards"};

  @keyframes openDrawer {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0%);
    }
  }

  @keyframes closeDrawer {
    from {
      transform: translateY(${(props) => `${props.totalDeltaY}px`});
    }
    to {
      transform: translateY(100%);
    }
  }
`;
const DrawerInnerContainer = _emotion_styled.default.div`
  ${(props) => props.alignBottom ? "margin-top: auto;" : ""}
  position: relative;
  display: flex;
  flex-direction: column;
  width: ${(props) => props.kind === "floating" ? `calc(100% - ${require_styles_tokens_spacing.Spacing.md * 2}px)` : "100%"};
  min-width: 320px;
  ${(props) => props.kind === "floating" ? `bottom: 0;` : ""}
  margin-bottom: ${require_styles_tokens_spacing.Spacing.px.md};
  margin-top: ${require_styles_tokens_spacing.Spacing.px.md};
  height: auto;
  border-radius: ${(props) => props.kind === "floating" ? require_styles_tokens_spacing.Spacing.px.lg : `${require_styles_tokens_spacing.Spacing.px.lg} ${require_styles_tokens_spacing.Spacing.px.lg} 0 0`};
  background-color: ${({ theme }) => theme.bg};
  padding: ${(props) => props.padding ? `${props.padding}` : `${require_styles_tokens_spacing.Spacing.px["6xl"]} ${require_styles_tokens_spacing.Spacing.px.xl} ${require_styles_tokens_spacing.Spacing.px["2xl"]}
    ${require_styles_tokens_spacing.Spacing.px.xl}`};
`;
const Grabber = _emotion_styled.default.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: ${require_styles_tokens_spacing.Spacing.px.lg};
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 9px;
  cursor: pointer;
`;
const CloseButtonContainer = _emotion_styled.default.div`
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 50%;
  background-color: #edeef1; /* TODO: Use semantic token */
  padding: ${require_styles_tokens_spacing.Spacing.px["2xs"]};
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;

  * > * {
    line-height: 14px;
  }
`;
const CloseButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  ${require_styles_common.standardFocusOutline}
  width: 24px;
  height: 24px;
  justify-self: flex-end;
`;
const BackButtonContainer = _emotion_styled.default.div`
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  padding: ${require_styles_tokens_spacing.Spacing.px.xs};
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
`;
const GrabberBar = _emotion_styled.default.div`
  width: 36px;
  height: 5px;
  border-radius: 2.5px;
  background: #c0c9d6;
`;
//#endregion
exports.Drawer = Drawer;
