import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, memo, useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { LayoutVariant } from '@redocly/config';
import { useAtomValue } from 'jotai/index';
import { SamplesPanel } from '../common/index.js';
import { layoutAtom } from '../../jotai/app.js';
import { OperationNavigationItems } from './OperationNavigationItems.js';
import { StyledButton } from './styled.js';
import { useTranslate } from '../../hooks/index.js';
import { styled } from '../../styled-components.js';
const MAX_OPERATIONS = 8;
export function OperationsNavigationComponent({ items, routingBasePath, }) {
    const translate = useTranslate();
    const [isExpanded, setIsExpanded] = useState(false);
    const navigate = useNavigate();
    const layout = useAtomValue(layoutAtom);
    const isStacked = layout === LayoutVariant.STACKED;
    const { operations, webhooks, count } = useMemo(() => {
        const all = items.filter((item) => item.type === 'operation');
        const list = isExpanded ? all : all.slice(0, MAX_OPERATIONS);
        const { operations, webhooks } = list.reduce((acc, item) => {
            if (item.isWebhook) {
                acc.webhooks.push(item);
            }
            else {
                acc.operations.push(item);
            }
            return acc;
        }, { operations: [], webhooks: [] });
        return {
            operations,
            webhooks,
            count: !isExpanded && all.length > MAX_OPERATIONS ? all.length - MAX_OPERATIONS : 0,
        };
    }, [isExpanded, items]);
    const handleOnClick = useCallback((link) => navigate(link), [navigate]);
    if (!operations.length && !webhooks.length) {
        return null;
    }
    return (_jsxs(Wrapper, { isStacked: isStacked, "data-testid": "operation-navigation-list", children: [operations.length > 0 && (_jsx(OperationNavigationItems, { items: operations, onClick: handleOnClick, routingBasePath: routingBasePath, translate: translate, title: translate('openapi.operations', 'Operations') })), webhooks.length > 0 && (_jsx(OperationNavigationItems, { items: webhooks, onClick: handleOnClick, routingBasePath: routingBasePath, translate: translate, title: translate('openapi.webhooks', 'Webhooks') })), !isExpanded && Boolean(count) && (_jsxs(StyledButton, { variant: "link", size: "large", "data-testid": "show-more-operations", fullWidth: true, onClick: () => setIsExpanded(true), children: [translate('openapi.actions.show', 'Show'), " ", count, ' ', translate('openapi.actions.more', 'more'), "..."] }))] }));
}
export const OperationsNavigation = memo(OperationsNavigationComponent);
const Wrapper = styled(SamplesPanel) `
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding-top: var(--spacing-xxl);
`;
//# sourceMappingURL=OperationsNavigation.js.map