"use client";
import { standardFocusOutline } from "../styles/common.js";
import { Icon } from "./Icon/Icon.js";
import { z } from "../styles/z-index.js";
import { UnstyledButton } from "./UnstyledButton.js";
import { Button } from "./Button.js";
import { Spacing } from "../styles/tokens/spacing.js";
import { useIOSScrollLock } from "../hooks/useIOSScrollLock.js";
import { useKeyboardOffset } from "../hooks/useKeyboardOffset.js";
import styled from "@emotion/styled";
import { useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/Drawer.tsx
const Drawer = (props) => {
	const [isOpen, setIsOpen] = useState(true);
	const [lastY, setLastY] = useState(null);
	const [totalDeltaY, setTotalDeltaY] = useState(0);
	const [fractionVisible, setFractionVisible] = useState(1);
	const [grabbing, setGrabbing] = useState(false);
	const drawerContainerRef = useRef(null);
	useIOSScrollLock();
	const keyboardOffset = 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Background, {
		isOpen,
		fractionVisible,
		onClick: handleClose,
		onTouchMove: (e) => e.preventDefault()
	}), /* @__PURE__ */ jsx(DrawerContainer, {
		isOpen,
		onTouchMove: handleTouchMove,
		onTouchStart: handleTouchStart,
		onTouchEnd: handleTouchEnd,
		totalDeltaY,
		grabbing,
		ref: drawerContainerRef,
		keyboardOffset,
		"data-drawer-scrollable": true,
		top: props.top,
		children: /* @__PURE__ */ jsxs(DrawerInnerContainer, {
			kind: props.kind,
			padding: props.padding,
			alignBottom: props.alignBottom,
			children: [
				props.grabber && !props.nonDismissable && /* @__PURE__ */ jsx(Grabber, {
					onClick: handleClose,
					children: /* @__PURE__ */ jsx(GrabberBar, {})
				}),
				props.handleBack && /* @__PURE__ */ jsx(BackButtonContainer, { children: /* @__PURE__ */ jsx(Button, {
					onClick: props.handleBack,
					icon: { name: "ChevronLeft" },
					kind: "ghost",
					size: "Small"
				}) }),
				props.closeButton && !props.nonDismissable && /* @__PURE__ */ jsx(CloseButtonContainer, { children: /* @__PURE__ */ jsx(CloseButton, {
					onClick: handleClose,
					type: "button",
					children: /* @__PURE__ */ jsx(Icon, {
						name: "CentralCrossLarge",
						square: true,
						width: 16,
						color: "grayBlue43"
					})
				}) }),
				props.children
			]
		})
	})] });
};
const Background = styled.div`
  position: fixed;
  inset: 0;
  max-height: 100dvh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  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 = styled.div`
  position: fixed;
  max-height: 100dvh;
  width: 100%;
  bottom: ${(props) => props.keyboardOffset ?? 0}px;
  transform: translateY(${(props) => `${props.totalDeltaY}px`});
  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 = styled.div`
  ${(props) => props.alignBottom ? "margin-top: auto;" : ""}
  position: relative;
  display: flex;
  flex-direction: column;
  width: ${(props) => props.kind === "floating" ? `calc(100% - ${Spacing.md * 2}px)` : "100%"};
  min-width: 320px;
  ${(props) => props.kind === "floating" ? `bottom: 0;` : ""}
  margin-bottom: ${Spacing.px.md};
  margin-top: ${Spacing.px.md};
  height: auto;
  border-radius: ${(props) => props.kind === "floating" ? Spacing.px.lg : `${Spacing.px.lg} ${Spacing.px.lg} 0 0`};
  background-color: ${({ theme }) => theme.bg};
  padding: ${(props) => props.padding ? `${props.padding}` : `${Spacing.px["6xl"]} ${Spacing.px.xl} ${Spacing.px["2xl"]}
    ${Spacing.px.xl}`};
`;
const Grabber = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: ${Spacing.px.lg};
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 9px;
  cursor: pointer;
`;
const CloseButtonContainer = styled.div`
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 50%;
  background-color: #edeef1; /* TODO: Use semantic token */
  padding: ${Spacing.px["2xs"]};
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;

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