import{jsx as a,jsxs as I}from"react/jsx-runtime";import{useLayoutEffect as j,useRef as A,useState as w,useCallback as S,memo as V,useMemo as E}from"react";import{useAtomValue as H,useSetAtom as W}from"jotai";import{Button as _}from"@redocly/theme/components/Button/Button";import{OverflowMenuVerticalIcon as v}from"@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon";import{Tooltip as D}from"@redocly/theme/components/Tooltip/Tooltip";import{LanguageDropdown as M}from"./LanguageDropdown.js";import{languageAtom as R,layoutAtom as O}from"../../jotai/app.js";import{LanguageListContainer as z,LanguageListItem as B,Container as G}from"./styled.js";import{LanguageItem as P}from"./LanguageItem.js";import{DROPDOWN_TRIGGER_WIDTH as N,ITEM_WIDTH as L}from"./constants.js";import{LanguageListSkeleton as $}from"../common/Skeleton/LanguageListSkeleton.js";import{useTelemetry as q}from"../../hooks/index.js";function F({languages:o,activeLanguage:t,translate:r}){const[n,l]=w([]),[s,u]=w([]),d=q(),g=A(null),k=H(O),h=W(R),p=e=>{d.sendSelectLanguageClickedMessage([{object:"select_language",language:e}])},b=e=>{h(e),p(e)},x=e=>{const m=s.findIndex(i=>i.key===e);if(m!==-1){const i=[...s],c=[...n];y(c,i,m),l(c),u(i),p(e),h(e)}},f=S(()=>{const e=g?.current?.offsetWidth;if(!e)return;const{newVisibleItems:m,newHiddenItems:i}=J(e,[...o]),c=i.findIndex(T=>T.key===t);c!==-1&&y(m,i,c),l(m),u(i)},[t,o]);j(()=>(f(),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}),[k,t]);const C=E(()=>n.length>=5||s.length?"space-between":"start",[s.length,n.length]);return I(G,{ref:g,children:[I(z,{$justifyContent:C,children:[!n.length&&a($,{}),n.map(e=>a(B,{onClick:()=>b(e.key),active:t===e.key,children:a(P,{item:e,withIcon:!0})},e.key))]}),s.length?a(M,{activeTab:t,samples:s,onChange:x,trigger:a(D,{tip:r("openapi.languages.moreButton.tooltipText","View more languages"),arrowPosition:"right",placement:"top",children:a(_,{icon:a(v,{}),"aria-label":"More languages",variant:"text",style:{height:"100%"}})}),withArrow:!1,withCheckmark:!1,width:156}):null]})}const ae=V(F);function J(o,t){let r=0;const n=[],l=[];return t.forEach((s,u)=>{const g=u===t.length-1&&l.length===0?0:N;o&&r+L+g<=o?(n.push(s),r+=L):l.push(s)}),{newVisibleItems:n,newHiddenItems:l}}function y(o,t,r){const n=o[o.length-1];n&&(o[o.length-1]=t[r],t[r]=n)}export{ae as LanguageList};
