"use client";
import { Layouts } from "../../components";
import { AnimatePresence, motion } from "motion/react";
import { useSwipe } from "../../hooks";
import { useEffect, useRef, useState } from "react";
import Style, { SwipeArea } from "./BottomSheet.styled";
export default function BottomSheet(props) {
    const bottomsheet = useRef(null);
    const [active, setActive] = useState(props?.active || true);
    const scale = props?.scale || 1;
    const swipe = useSwipe(props?.swipe && {
        ...(typeof props?.swipe === "object" && props?.swipe),
        threshold: 10000,
        vertical: true,
        elastic: { top: 0, bottom: 1 },
        variants: (direction) => ({
            y: direction > 0 ? 0 : `100%`,
        }),
        onSwipe: (e, move) => move === -1 && handleClose(e),
    });
    const handleClose = (e) => {
        setActive(false);
        setTimeout(() => {
            if (typeof props?.onClose === "function")
                props?.onClose();
        }, 300);
    };
    const handleBlur = (e) => {
        if (bottomsheet.current && !bottomsheet.current.contains(e.target)) {
            setActive(false);
            setTimeout(() => {
                if (typeof props?.onBlur === "function")
                    props?.onBlur(e);
            }, 300);
        }
    };
    useEffect(() => {
        // setActive(true);
        document.addEventListener("mousedown", handleBlur);
        return () => {
            document.removeEventListener("mousedown", handleBlur);
            handleClose();
            setActive(false);
        };
    }, []);
    return (<Layouts.Panel active={active} style={{ zIndex: props?.zIndex || 200, pointerEvents: "none" }} onClick={(e) => handleBlur(e)} fix>
            <AnimatePresence mode="wait">
                {active && (<Style {...(swipe && !props?.swipe?.area ? swipe : {})} key={"bottomsheet"} ref={bottomsheet} tabIndex={100} $scale={scale} $active={active} $height={props?.height} onBlur={(e) => handleBlur(e)} as={motion.div} initial={{ y: "100%" }} animate={{ y: active ? 0 : "100%" }} exit={{ y: "100%" }} transition={{ ease: "easeInOut", duration: 0.15 }} variants={undefined} style={props?.style} layout>
                        {props?.swipe?.area && (<SwipeArea {...swipe} as={motion.div} $area={(typeof props?.swipe === "object" && props?.swipe?.area) || 2} variants={undefined}/>)}
                        {props?.children}
                    </Style>)}
            </AnimatePresence>
        </Layouts.Panel>);
}
//# sourceMappingURL=BottomSheet.jsx.map