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/theme";import styled from"styled-components";import{useAtomValue}from"jotai/index";import{SamplesPanel}from"../common";import{layoutAtom}from"../../jotai/app";import{OperationNavigationItems}from"./OperationNavigationItems";import{StyledButton}from"./styled";import{useTranslate}from"../../hooks";const MAX_OPERATIONS=8;export function OperationsNavigationComponent({items:o,routingBasePath:t}){const e=useTranslate(),[a,i]=useState(!1),s=useNavigate(),n=useAtomValue(layoutAtom)===LayoutVariant.STACKED,{operations:r,webhooks:p,count:m}=useMemo((()=>{const t=o.filter((o=>"operation"===o.type)),e=a?t:t.slice(0,MAX_OPERATIONS),{operations:i,webhooks:s}=e.reduce(((o,t)=>(t.isWebhook?o.webhooks.push(t):o.operations.push(t),o)),{operations:[],webhooks:[]});return{operations:i,webhooks:s,count:!a&&t.length>MAX_OPERATIONS?t.length-MAX_OPERATIONS:0}}),[a,o]),l=useCallback((o=>s(o)),[s]);return r.length||p.length?_jsxs(Wrapper,{isStacked:n,"data-testid":"operation-navigation-list",children:[r.length>0&&_jsx(OperationNavigationItems,{items:r,onClick:l,routingBasePath:t,translate:e,title:e("openapi.operations","Operations")}),p.length>0&&_jsx(OperationNavigationItems,{items:p,onClick:l,routingBasePath:t,translate:e,title:e("openapi.webhooks","Webhooks")}),!a&&Boolean(m)&&_jsxs(StyledButton,{variant:"link",size:"large","data-testid":"show-more-operations",fullWidth:!0,onClick:()=>i(!0),children:[e("openapi.actions.show","Show")," ",m," ",e("openapi.actions.more","more"),"..."]})]}):null}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