import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from 'react';
import { useAtomValue } from 'jotai';
import { LayoutVariant } from '@redocly/config';
import { breakpoints } from '@redocly/theme/core/openapi';
import { OpenApiHeader } from '@redocly/theme/components/OpenApiDocs/hooks/OpenApiHeader';
import { PageFooter } from '../PageFooter/index.js';
import { globalOptionsAtom } from '../../jotai/store.js';
import { RenderHook } from '../RenderHook/index.js';
import { RightPanel } from '../RightPanel/index.js';
import { layoutAtom } from '../../jotai/app.js';
import { Row, SamplesMiddlePanel, SamplesPanel } from '../common/index.js';
import { Items } from '../ContentItems/Items.js';
import { ContentItem } from '../ContentItem/index.js';
import { styled } from '../../styled-components.js';
export function SectionContent({ items, hideFooterAndHeader, }) {
    const { unstable_hooks: { MiddlePanelHeader }, routingBasePath, } = useAtomValue(globalOptionsAtom);
    const layout = useAtomValue(layoutAtom);
    const isStacked = layout === LayoutVariant.STACKED;
    const renderFooter = useMemo(() => {
        if (hideFooterAndHeader) {
            return null;
        }
        return (_jsx(MiddlePanelWrapper, { isStacked: isStacked, children: _jsx(PageFooter, {}) }));
    }, [hideFooterAndHeader, isStacked]);
    const renderHeader = useMemo(() => {
        if (hideFooterAndHeader || (!OpenApiHeader && !MiddlePanelHeader)) {
            return null;
        }
        return (_jsx(MiddlePanelWrapper, { isStacked: isStacked, children: MiddlePanelHeader ? (_jsx(RenderHook, { Hook: MiddlePanelHeader, props: undefined })) : (_jsx(OpenApiHeader, {})) }));
    }, [MiddlePanelHeader, hideFooterAndHeader, isStacked]);
    if (items.length === 0) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [renderHeader, _jsxs(Row, { layout: layout, children: [_jsx(SectionContainer, { layout: layout, children: items
                            .filter(({ type }) => type === 'section')
                            .map((item) => (_jsx(ContentItem, { item: item, routingBasePath: routingBasePath, children: _jsx(Items, { items: item.items, routingBasePath: routingBasePath }) }, item.id))) }), _jsx(RightPanelContainer, { isStacked: isStacked, tabIndex: 0, children: _jsx(RightPanel, { item: items[0] }) })] }), items
                .filter(({ type }) => type !== 'section')
                .map((item) => (_jsx(ContentItem, { item: item, routingBasePath: routingBasePath, children: _jsx(Items, { items: item.items, routingBasePath: routingBasePath }) }, item.id))), renderFooter] }));
}
const MiddlePanelWrapper = styled(SamplesMiddlePanel) `
  align-self: flex-start;
  padding-top: var(--panel-gap-vertical);
  padding-bottom: var(--panel-gap-vertical);
`;
export const SectionContainer = styled.div `
  width: 100%;

  @media screen and (min-width: ${breakpoints.large}) {
    width: ${({ layout }) => layout === LayoutVariant.STACKED ? '100%' : 'calc(100% - var(--panel-samples-width))'};
  }
`;
export const RightPanelContainer = styled(SamplesPanel) `
  margin: var(--spacing-base) 0;
`;
//# sourceMappingURL=SectionContent.js.map