import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
/**
 * @deprecated
 */
import { Box } from "@chakra-ui/react";
import * as React from "react";
import EditorContext from "../EditorContext";
const staticPosition = {
    top: 0,
    left: 0,
    clientWidth: 0,
    clientHeight: 0,
    scrollWidth: 0,
    scrollHeight: 0,
    scrollLeft: 0,
    scrollTop: 0,
    viewportOffsetTop: 0,
    viewportOffsetBottom: 0,
    viewportOffsetLeft: 0,
    viewportOffsetRight: 0,
};
const ScrollPositionContext = React.createContext(staticPosition);
export const useScrollPositionContext = () => React.useContext(ScrollPositionContext) || staticPosition;
export const ScrollPositionProvider = (props) => {
    var _a, _b;
    const ref = React.useRef(null);
    const value = React.useMemo(() => props.value || staticPosition, [(_a = props.value) === null || _a === void 0 ? void 0 : _a.left, (_b = props.value) === null || _b === void 0 ? void 0 : _b.top]);
    return (_jsx("div", Object.assign({ ref: ref }, { children: _jsx(ScrollPositionContext.Provider, Object.assign({ value: value }, { children: props.children })) })));
};
export const Sticky = (props) => {
    const isSelectMode = EditorContext.useSelectState((state) => state.editMode === "select");
    const stickyRef = React.useRef(null);
    const ref = React.useRef(null);
    const [staticPosition, setStaticPosition] = React.useState(null);
    const [height, setHeight] = React.useState(0);
    const position = useScrollPositionContext();
    React.useEffect(() => {
        const interval = 500;
        const timeout = setTimeout(() => { var _a; return setHeight(((_a = stickyRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0); }, interval);
        return () => clearTimeout(timeout);
    }, [stickyRef.current]);
    const isFixed = !isSelectMode &&
        staticPosition !== null &&
        (props.top !== undefined
            ? staticPosition -
                position.scrollTop -
                props.top -
                position.viewportOffsetTop <=
                0
            : props.bottom !== undefined
                ? props.bottom * -1 < staticPosition - ((window === null || window === void 0 ? void 0 : window.innerHeight) || 0)
                : false);
    React.useEffect(() => {
        var _a;
        const rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
        if (rect) {
            setStaticPosition(props.top !== undefined
                ? rect.top + position.scrollTop
                : props.bottom !== undefined
                    ? rect.bottom
                    : null);
        }
    }, [ref.current, props.top, props.bottom, position.scrollTop]);
    return (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ ref: stickyRef }, props, { flex: 1, zIndex: 999, position: isFixed ? "fixed" : "relative", top: isFixed && props.top !== undefined
                    ? `${props.top + position.viewportOffsetTop}px`
                    : undefined, bottom: isFixed && props.bottom !== undefined
                    ? `${props.bottom + position.viewportOffsetBottom}px`
                    : undefined, left: isFixed && props.left !== undefined
                    ? `${props.left + position.viewportOffsetLeft}px`
                    : undefined, right: isFixed && props.right !== undefined
                    ? `${props.right + position.viewportOffsetRight}px`
                    : undefined }, { children: props.children })), _jsx(Box, { ref: ref, height: isFixed ? height : undefined })] }));
};
//# sourceMappingURL=Sticky.js.map