"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LanguageList=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),jotai_1=require("jotai"),theme_1=require("@redocly/theme"),LanguageDropdown_1=require("./LanguageDropdown"),app_1=require("../../jotai/app"),styled_1=require("./styled"),LanguageItem_1=require("./LanguageItem"),constants_1=require("./constants"),LanguageListSkeleton_1=require("../common/Skeleton/LanguageListSkeleton");function LanguageListComponent({languages:e,activeLanguage:t}){const[n,a]=(0,react_1.useState)([]),[s,i]=(0,react_1.useState)([]),r=(0,react_1.useRef)(null),o=(0,jotai_1.useAtomValue)(app_1.layoutAtom),u=(0,jotai_1.useSetAtom)(app_1.languageAtom),_=(0,react_1.useCallback)((()=>{var n;const s=null===(n=null==r?void 0:r.current)||void 0===n?void 0:n.offsetWidth;if(!s)return;const{newVisibleItems:o,newHiddenItems:u}=calculateVisibleAndHiddenItems(s,[...e]),_=u.findIndex((e=>e.key===t));-1!==_&&swapItems(o,u,_),a(o),i(u)}),[t,e]);return(0,react_1.useLayoutEffect)((()=>(_(),window.addEventListener("resize",_),()=>{window.removeEventListener("resize",_)})),[o,t]),(0,jsx_runtime_1.jsxs)(styled_1.Container,{ref:r,children:[(0,jsx_runtime_1.jsxs)(styled_1.LanguageListContainer,{children:[!n.length&&(0,jsx_runtime_1.jsx)(LanguageListSkeleton_1.LanguageListSkeleton,{}),n.map((e=>(0,jsx_runtime_1.jsx)(styled_1.LanguageListItem,{onClick:()=>u(e.key),active:t===e.key,children:(0,jsx_runtime_1.jsx)(LanguageItem_1.LanguageItem,{item:e,withIcon:!0})},e.key)))]}),s.length?(0,jsx_runtime_1.jsx)(LanguageDropdown_1.LanguageDropdown,{activeTab:t,samples:s,onChange:e=>{const t=s.findIndex((t=>t.key===e));if(-1!==t){const r=[...s],o=[...n];swapItems(o,r,t),a(o),i(r),u(e)}},trigger:(0,jsx_runtime_1.jsx)(theme_1.Button,{icon:(0,jsx_runtime_1.jsx)(theme_1.OverflowMenuVerticalIcon,{}),variant:"text",style:{height:"100%"}}),withArrow:!1,withCheckmark:!1,width:156}):null]})}function calculateVisibleAndHiddenItems(e,t){let n=0;const a=[],s=[];return t.forEach((t=>{e&&n+constants_1.ITEM_WIDTH<=e?(a.push(t),n+=constants_1.ITEM_WIDTH):s.push(t)})),{newVisibleItems:a,newHiddenItems:s}}function swapItems(e,t,n){const a=e[e.length-1];a&&(e[e.length-1]=t[n],t[n]=a)}exports.LanguageList=(0,react_1.memo)(LanguageListComponent);
//# sourceMappingURL=LanguageList.js.map