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