import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useEffect, useRef, useState } from 'react';
import { useAtom } from 'jotai';
import { useLocation } from 'react-router-dom';
import { useMount, breakpoints } from '@redocly/theme/core/openapi';
import { isSidebarOpenedAtom } from '../../jotai/app.js';
import { SidebarActions } from './SidebarActions.js';
import { styled } from '../../styled-components.js';
const StyledStickySidebar = styled.div `
  overflow: hidden;
  flex-direction: column;
  backface-visibility: hidden;
  height: ${({ offsetTop }) => `calc(100vh - ${offsetTop})`};
  top: 0;
  flex: 0 0 auto;
  position: fixed;
  display: ${({ open }) => (open ? 'flex' : 'none')};
  z-index: 2;
  width: 100%;
  background: var(--sidebar-bg-color);
  border-right: ${({ collapsedSidebar }) => collapsedSidebar ? '1px solid var(--sidebar-border-color)' : 'auto'};

  @media screen and (min-width: ${breakpoints.small}) {
    position: sticky;
    z-index: auto;
    width: ${({ collapsedSidebar }) => (collapsedSidebar ? 'var(--sidebar-width)' : 'auto')};
    display: flex;
  }
  @media print {
    display: none;
  }
`;
function StickyResponsiveSidebarComponent({ scrollYOffset, className, children, collapsedSidebar, }) {
    const [offsetTop, setOffsetTop] = useState('0px');
    const stickyElement = useRef(null);
    const location = useLocation();
    const [isSidebarOpened, setIsSidebarOpened] = useAtom(isSidebarOpenedAtom);
    useEffect(() => {
        if (location.hash) {
            setIsSidebarOpened(false);
        }
    }, [location.pathname, location.hash, setIsSidebarOpened]);
    useMount(() => {
        const top = scrollYOffset();
        // rerender when hydrating from SSR
        // see https://github.com/facebook/react/issues/8017#issuecomment-256351955
        setOffsetTop(`${top}px`);
    });
    return (_jsx(_Fragment, { children: _jsxs(StyledStickySidebar, { open: isSidebarOpened, className: className, offsetTop: offsetTop, style: {
                top: offsetTop,
            }, ref: stickyElement, collapsedSidebar: collapsedSidebar, children: [collapsedSidebar || isSidebarOpened ? children : null, _jsx(SidebarActions, {})] }) }));
}
export const StickyResponsiveSidebar = memo(StickyResponsiveSidebarComponent);
//# sourceMappingURL=StickyResponsiveSidebar.js.map