import{jsx as n,Fragment as p,jsxs as h}from"react/jsx-runtime";import w,{useRef as x,useState as L,useMemo as b,useCallback as B,useLayoutEffect as k}from"react";import{Dropdown as E}from"@redocly/theme/components/Dropdown/Dropdown";import{DropdownMenu as M}from"@redocly/theme/components/Dropdown/DropdownMenu";import{DropdownMenuItem as C}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{Tooltip as T}from"@redocly/theme/components/Tooltip/Tooltip";import{trimText as y}from"@redocly/theme/core/openapi";import{styled as s}from"../../styled-components.js";import{calculateMaxLength as D}from"../../utils/calculateMaxLength.js";const R=25,_=3,u=({breadcrumb:e,onClick:t,maxLength:r})=>{const o=e.name.length>r,i=y(e.name,r);return n(T,{tip:e.name,placement:"bottom",disabled:!o,children:n(v,{onClick:()=>t(e.href),children:i})})},z=({breadcrumbs:e,onClick:t,maxLength:r})=>{const o=e[0],i=e[e.length-1],d=e.slice(1,-1);return h(p,{children:[n(u,{breadcrumb:o,onClick:t,maxLength:r}),n(g,{children:"/"}),n(E,{trigger:n(O,{children:"..."}),closeOnClick:!0,alignment:"end",children:n(M,{children:d.map(a=>n(C,{onAction:()=>t(a.href),children:a.name},a.href))})}),n(g,{children:"/"}),n(u,{breadcrumb:i,onClick:t,maxLength:r})]})},F=({breadcrumbs:e,onClick:t,maxLength:r})=>n(p,{children:e.map((o,i)=>h(w.Fragment,{children:[n(u,{breadcrumb:o,onClick:t,maxLength:r}),i!==e.length-1&&n(g,{children:"/"})]},o.href))});function q({breadcrumbs:e,onClick:t}){const r=x(null),o=x(null),[i,d]=L(R),a=e.length>_,f=b(()=>a?[e[0],e[e.length-1]]:e,[e,a]),m=B(()=>{if(!r.current?.parentElement||!o.current)return;const c=r.current.parentElement.clientWidth,l=D(f,c,a,o.current);d(l)},[f,a]);return k(()=>{m();const c=new ResizeObserver(m),l=r.current?.parentElement;return l&&c.observe(l),()=>{c.disconnect()}},[m]),e.length?h(p,{children:[n(j,{ref:o,"aria-hidden":"true"}),n(A,{ref:r,"data-component-name":"TagItem/Breadcrumbs",children:a?n(z,{breadcrumbs:e,onClick:t,maxLength:i}):n(F,{breadcrumbs:e,onClick:t,maxLength:i})})]}):null}const j=s.span`
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
`,A=s.div`
  position: absolute;
  top: -26px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(var(--breadcrumbs-gap) / 2);
  margin-bottom: var(--spacing-xxs);
  max-width: 100%;
`,v=s.button`
  background: none;
  border: none;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--breadcrumbs-text-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  padding: 1px calc(var(--spacing-xxs) / 2);
  line-height: var(--line-height-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;

  &:hover {
    background-color: var(--breadcrumbs-background-color-hover);
  }
`,g=s.span`
  line-height: var(--line-height-sm);
  padding: 0 calc(var(--spacing-xxs) / 2);
  color: var(--breadcrumbs-text-color);
  font-size: var(--font-size-sm);
`,O=s(v)`
  text-align: center;
  overflow: visible;
`;export{q as Breadcrumbs};
