import*as e from"react";import{useQuery as u}from"@tanstack/react-query";import a from"styled-components";import{Outlet as g,useLocation as h,useNavigate as v,useParams as y}from"react-router-dom";import{Flex as x}from"@redocly/portal-legacy-ui";import{Button as w}from"@redocly/theme/components/Button/Button";import{Sidebar as E}from"@redocly/theme/components/Sidebar/Sidebar";import{Admonition as b}from"@redocly/theme/markdoc/components/Admonition/Admonition";import{MenuItem as P}from"@redocly/theme/components/Menu/MenuItem";import{AddIcon as A}from"@redocly/theme/icons/AddIcon/AddIcon";import{useTranslate as C}from"../../../../client/app/hooks";import k from"../../../../client/app/CircularProgress";import{loadAndNavigate as p}from"../../../../client/app/utils/loadAndNavigate";import S from"./components/icons/PlaceholderIcon";import{ButtonWithLoading as L}from"./components/ButtonWithLoading";import{CreateAppDialog as I}from"./CreateAppDialog";function j(){const{id:n}=y(),s=v(),f=h(),i=e.useRef(null),{translate:o}=C(),{data:r,isLoading:m,isRefetching:l,error:c}=u({refetchOnWindowFocus:!1,queryKey:["APPS"],queryFn:()=>fetch("/api/api-keys/apps").then(t=>t.json().then(d=>t.ok?Promise.resolve(d):Promise.reject(d)))});return e.useEffect(()=>{const t=m||l;!n&&r?.length&&!t?p({navigate:s,to:"apps/"+r[0].id+f.search,origin:"browser",options:{replace:!0}}):n&&!t&&!r?.length&&p({navigate:s,to:"apps/"})},[n,r,l]),e.createElement(e.Fragment,null,m||l?e.createElement(x,{justifyContent:"center",mt:"2em"},e.createElement(k,null)):c?e.createElement(b,{type:"danger"},c?.message??"Something went wrong"):r?e.createElement(z,{"data-component-name":"Layout/PageLayout"},n&&e.createElement(E,{growContent:!1,menu:r?.map(t=>e.createElement(P,{key:t.id,item:{label:t.name,link:"apps/"+t.id,items:[],active:n===t.id,hasActiveSubItem:!1}})),header:e.createElement(D,{"data-translation-key":"dev.sidebar.header"},o("dev.sidebar.header","My apps")),footer:e.createElement(w,{variant:"outlined",fullWidth:!0,onClick:()=>i.current.open(),icon:e.createElement(A,null),iconPosition:"right",size:"small","data-translation-key":"dev.sidebar.footer.text"},o("dev.sidebar.footer.text","New application")),versions:null}),!n&&!r.length?e.createElement(N,null,e.createElement(R,null,e.createElement(S,null),e.createElement(W,{"data-translation-key":"dev.newApp.text"},o("dev.newApp.text","Create your first app")),e.createElement(L,{variant:"primary",onClick:()=>i.current.open(),"data-translation-key":"dev.newApp"},o("dev.newApp","New application")))):e.createElement(F,null,e.createElement(g,null)),e.createElement(I,{ref:i})):null)}const z=a.div`
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - var(--navbar-height));
`,F=a.div`
  flex: 1 0 0;
  /*
    flex-basis is ignored for nested flex in Chrome, need to set width
    See more here: https://stackoverflow.com/a/34355447
  */
  width: 0;
  max-width: 100%;
`,N=a.div`
  display: flex;
  flex-grow: 1;
`,D=a.div`
  display: flex;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-xxlg);
  color: var(--text-color-primary);
  font-family: var(--font-family-base);
`,R=a.div`
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-base);
`,W=a.div`
  font-weight: var(--font-weight-regular);
  font-size: 28px;
  line-height: 36px;
  color: var(--input-content-placeholder-color);
  padding: var(--spacing-xl) 0 var(--spacing-lg) 0;
`;export{j as default};
