import{jsx as i,jsxs as e}from"react/jsx-runtime";import{memo as T,useCallback as v}from"react";import{useNavigate as W}from"react-router-dom";import{useAtomValue as M}from"jotai";import{LayoutVariant as C}from"@redocly/config";import{Markdown as o}from"@redocly/theme/components/Markdown/Markdown";import{breakpoints as d}from"@redocly/theme/core/openapi";import{Button as I}from"@redocly/theme/components/Button/Button";import{PageActions as j}from"@redocly/theme/components/PageActions/PageActions";import{H2 as B}from"@redocly/theme/components/Typography/H2";import{LinkIcon as A}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{encodeBackSlashes as L,getBreadcrumbs as H}from"../../utils/index.js";import{joinWithSeparator as $}from"../../services/history/helpers.js";import{Row as P,SamplesMiddlePanel as w,SamplesPanel as c,ShareLink as D}from"../common/index.js";import{Markdown as N}from"../Markdown/index.js";import{OperationsNavigation as V}from"./OperationsNavigation.js";import{Breadcrumbs as _}from"./Breadcrumbs.js";import{layoutAtom as E}from"../../jotai/app.js";import{useTranslate as F}from"../../hooks/index.js";import{styled as r}from"../../styled-components.js";import{StyledShareLink as K}from"../common/linkify.js";function O({item:a,routingBasePath:n="",isExpanded:g}){const b=F(),{description:k,name:f,href:x}=a,t=W(),h=M(E),l=$(n,a.href),S=v(()=>{t(l)},[t,l]),p=!!a.items.length,m=h===C.STACKED,s=!p,u=H(a),y=v(z=>{t($(n,L(z)))},[t,n]);return e(R,{expanded:g,children:[e(P,{layout:h,children:[e(q,{fullWidth:s,isStacked:m,children:[e(G,{fullWidth:s,isStacked:m,children:[u.length>0&&i(_,{breadcrumbs:u,onClick:y}),e(Q,{children:[i(D,{to:x,"aria-label":`link to ${f}`}),f]}),i(j,{pageSlug:l})]}),i(J,{fullWidth:s,isStacked:m,children:i(N,{source:k})})]}),p&&i(V,{items:a.items,routingBasePath:n})]}),p&&!g&&e(U,{type:"button",variant:"text",size:"medium",onClick:S,children:["+ ",b("openapi.actions.show","Show")]})]})}const $a=T(O),R=r.div`
  padding-top: var(--spacing-lg);
  padding-bottom: ${({expanded:a})=>a?"var(--spacing-xxl)":""};
`,q=r(w)`
  && {
    @media screen and (min-width: ${d.large}) {
      padding-left: ${({fullWidth:a,isStacked:n})=>a&&!n?"0":void 0};
      padding-right: ${({fullWidth:a,isStacked:n})=>a&&!n?"0":void 0};
    }
  }
`,G=r.div`
  display: flex;
  align-items: flex-start;
  margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
  position: relative;

  @media screen and (min-width: ${d.large}) {
    padding-left: ${({fullWidth:a,isStacked:n})=>a&&!n?"calc(var(--panel-gap-horizontal) * 2)":void 0};
    padding-right: ${({fullWidth:a,isStacked:n})=>a&&!n?"var(--panel-gap-horizontal)":void 0};
    width: ${({fullWidth:a,isStacked:n})=>a&&!n?"calc(100% - var(--panel-samples-width))":void 0};

    ${K} {
      left: ${({fullWidth:a,isStacked:n})=>a&&!n?"unset":void 0};
    }
  }
`,J=r.div`
  /* 
    Markdoc components inside markdown that use SamplesPanel should not have padding.
    E.g. SchemaDefinition, McpTool
    padding is added by the TagItem itself
  */
  ${o} ${c} {
    padding-left: 0;
    padding-right: 0;
  }

  @media screen and (min-width: ${d.large}) {
    ${o} ${w} {
      padding-left: ${({fullWidth:a,isStacked:n})=>a&&!n?"calc(var(--panel-gap-horizontal) * 2)":void 0};
      padding-right: ${({fullWidth:a,isStacked:n})=>a&&!n?"var(--panel-gap-horizontal)":void 0};
    }

    ${o} .schema-definition ${c} {
      padding-left: ${({fullWidth:a,isStacked:n})=>a&&!n?"var(--panel-gap-horizontal)":void 0};
      padding-right: ${({fullWidth:a,isStacked:n})=>a&&!n?"calc(var(--panel-gap-horizontal) * 2)":void 0};
    }

    ${o} .mcp-tool ${c} {
      padding-left: ${({fullWidth:a,isStacked:n})=>a&&!n?"var(--panel-gap-horizontal)":void 0};
      padding-right: ${({fullWidth:a,isStacked:n})=>a&&!n?"calc(var(--panel-gap-horizontal) * 2)":void 0};
    }
  }
`,Q=r(B)`
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;

  :hover {
    ${A} {
      opacity: 1;
      visibility: visible;
    }
  }
`,U=r(I)`
  margin: var(--spacing-md) var(--spacing-xl) var(--spacing-xxs);
  width: calc(100% - var(--spacing-xl) * 2);

  @media screen and (min-width: ${d.medium}) {
    --button-margin-md: calc(var(--spacing-xl) * 2);

    margin-left: var(--button-margin-md);
    margin-right: var(--button-margin-md);
    width: calc(100% - var(--button-margin-md) * 2);
  }
`;export{$a as TagItem,O as TagItemComponent};
