import{jsx as r,jsxs as s,Fragment as x}from"react/jsx-runtime";import{memo as y}from"react";import{GenericIcon as w}from"@redocly/theme/icons/GenericIcon/GenericIcon";import{DirectionRightIcon as I}from"@redocly/theme/icons/DirectionRightIcon/DirectionRightIcon";import{getOperationColor as j}from"@redocly/theme/core/openapi";import{Tooltip as k}from"@redocly/theme/components/Tooltip/Tooltip";import{joinWithSeparator as z}from"../../services/index.js";import{encodeBackSlashes as O}from"../../utils/index.js";import{HttpVerb as V,NavigationBadge as d}from"../common/index.js";import{styled as o}from"../../styled-components.js";import{StyledButton as B}from"./styled.js";function C({verb:e,deprecated:t,isAdditionalOperation:n}){const i=j({httpVerb:e,deprecated:t,isAdditionalOperation:n});return r(V,{color:i,children:e})}function H(e){if(e.type==="tag")return r(F,{children:r(I,{size:"12px"})});const t=e.type==="operation"?e.httpVerb:e.type;return C({verb:t,deprecated:e.deprecated,isAdditionalOperation:e.isAdditionalOperation})}function N(e){return e.type==="operation"?e.path:e.name}function S({title:e,items:t,onClick:n,routingBasePath:i,translate:l,disableTooltip:h}){return s(x,{children:[e&&r(_,{children:e}),t.map(a=>{const{id:g,href:f,name:m,deprecated:v,badges:b}=a;return r(k,{tip:m,placement:"left",disabled:h,children:r(A,{variant:"outlined",size:"large",onClick:()=>n(z(i,O(f))),children:s("span",{children:[H(a),r(D,{children:N(a)}),v&&r(d,{deprecated:!0,children:l("openapi.badges.deprecated","Deprecated")}),b?.map(({name:p,color:u,icon:c})=>r(d,{color:u,icon:c&&r(w,{icon:c}),children:p},p))]})})},g)})]})}const Q=y(S),_=o.span`
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
  color: var(--text-color-primary);
  margin: var(--spacing-sm) 0 var(--spacing-xxs) 0;
`,A=o(B)`
  border-radius: var(--border-radius);
  background: var(--bg-color);
  justify-content: space-between;
  width: 100%;

  & > span {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    overflow-x: hidden;
  }

  &:hover {
    background: var(--bg-color);
  }

  &:hover::after {
    content: '→';
    line-height: var(--line-height-base);
  }
`,D=o.span`
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color-primary);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
`,F=o.div`
  width: 20px;
  height: 20px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-shrink: 0;
  background-color: var(--layer-color-hover);
  margin-right: var(--spacing-unit);

  & > svg {
    height: 12px;
    width: 12px;
  }
`;export{Q as OperationNavigationItems};
