import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useLayoutEffect,useRef,useState,useCallback,memo,useMemo}from"react";import{useAtomValue,useSetAtom}from"jotai";import{Button,OverflowMenuVerticalIcon}from"@redocly/theme";import{LanguageDropdown}from"./LanguageDropdown";import{languageAtom,layoutAtom}from"../../jotai/app";import{LanguageListContainer,LanguageListItem,Container}from"./styled";import{LanguageItem}from"./LanguageItem";import{DROPDOWN_TRIGGER_WIDTH,ITEM_WIDTH}from"./constants";import{LanguageListSkeleton}from"../common/Skeleton/LanguageListSkeleton";import{useOtelTelemetry}from"../../hooks";function LanguageListComponent({languages:e,activeLanguage:t}){const[n,o]=useState([]),[a,s]=useState([]),i=useOtelTelemetry(),r=useRef(null),u=useAtomValue(layoutAtom),l=useSetAtom(languageAtom),m=e=>{i.send({type:"openapi_docs.select_language.clicked",payload:{language:e}})},g=useCallback((()=>{var n;const a=null===(n=null==r?void 0:r.current)||void 0===n?void 0:n.offsetWidth;if(!a)return;const{newVisibleItems:i,newHiddenItems:u}=calculateVisibleAndHiddenItems(a,[...e]),l=u.findIndex((e=>e.key===t));-1!==l&&swapItems(i,u,l),o(i),s(u)}),[t,e]);useLayoutEffect((()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)})),[u,t]);const c=useMemo((()=>n.length>=5||a.length?"space-between":"start"),[a.length,n.length]);return _jsxs(Container,{ref:r,children:[_jsxs(LanguageListContainer,{$justifyContent:c,children:[!n.length&&_jsx(LanguageListSkeleton,{}),n.map((e=>_jsx(LanguageListItem,{onClick:()=>{return t=e.key,l(t),void m(t);var t},active:t===e.key,children:_jsx(LanguageItem,{item:e,withIcon:!0})},e.key)))]}),a.length?_jsx(LanguageDropdown,{activeTab:t,samples:a,onChange:e=>{const t=a.findIndex((t=>t.key===e));if(-1!==t){const i=[...a],r=[...n];swapItems(r,i,t),o(r),s(i),m(e),l(e)}},trigger:_jsx(Button,{icon:_jsx(OverflowMenuVerticalIcon,{}),variant:"text",style:{height:"100%"}}),withArrow:!1,withCheckmark:!1,width:156}):null]})}export const LanguageList=memo(LanguageListComponent);function calculateVisibleAndHiddenItems(e,t){let n=0;const o=[],a=[];return t.forEach(((s,i)=>{const r=i===t.length-1&&0===a.length?0:DROPDOWN_TRIGGER_WIDTH;e&&n+ITEM_WIDTH+r<=e?(o.push(s),n+=ITEM_WIDTH):a.push(s)})),{newVisibleItems:o,newHiddenItems:a}}function swapItems(e,t,n){const o=e[e.length-1];o&&(e[e.length-1]=t[n],t[n]=o)}
//# sourceMappingURL=LanguageList.js.map