import*as e from"react";import a from"styled-components";import{useQuery as f}from"@tanstack/react-query";import{useParams as b}from"react-router-dom";import{Box as h,Flex as v}from"@redocly/portal-legacy-ui";import{Admonition as y}from"@redocly/theme/markdoc/components/Admonition/Admonition";import{useTranslate as E}from"../../../../client/app/hooks";import x from"../../../../client/app/CircularProgress";import{Container as A}from"./components/Container";import w from"./components/AppOverview";import T from"./components/ApiKeys";import C from"./components/ApiLogs";import I from"./components/CreateApiKey";import{Description as k}from"./components/Description";const _="app-tab-actions-portal",c="api_keys",B="logs";function P(z){const{id:s}=b(),{isLoading:m,error:l,data:n}=f({queryKey:["APP:"+s],queryFn:()=>fetch(`/api/api-keys/apps/${s}`).then(t=>t.json())}),{translate:p}=E(),d=t=>o.findIndex(r=>r.id===t),o=[{id:c,name:p("dev.main.tab.appKeys","API keys"),content:e.createElement(e.Fragment,null,e.createElement(T,{credentials:n?.credentials,attributes:n?.attributes}),e.createElement(k,{text:n?.description})),show:!0},{id:B,name:p("dev.main.tab.logs","Logs"),content:e.createElement(C,null),show:!!n?.supportsLogs}].filter(t=>t.show),[i,g]=e.useState(0),u=n?.canCreateKey&&i===d(c);return e.createElement(h,{my:"2rem"},e.createElement(A,null,m?e.createElement(v,{justifyContent:"center",mt:"2em"},e.createElement(x,null)):l?e.createElement(y,{type:"danger"},l?.message??"Something went wrong"):n?e.createElement(e.Fragment,null,e.createElement(w,{app:n}),e.createElement(L,null,e.createElement(K,null,o.map(({name:t},r)=>e.createElement("span",{key:t,className:i===r?"active":"",onClick:()=>g(r)},t))),e.createElement("div",{id:_}),u&&e.createElement(I,{initialEnabledApis:(n.credentials||[]).flatMap(t=>t.apiProductIds||[])})),e.createElement(S,null,o[i].content)):null))}const U=a.i`
  display: inline-block;
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 451.847 451.847' width='12px' height='12px' %3E%3Cpath d='M225.923 354.706c-8.098 0-16.195-3.092-22.369-9.263L9.27 151.157c-12.359-12.359-12.359-32.397 0-44.751 12.354-12.354 32.388-12.354 44.748 0l171.905 171.915 171.906-171.909c12.359-12.354 32.391-12.354 44.744 0 12.365 12.354 12.365 32.392 0 44.751L248.292 345.449c-6.177 6.172-14.274 9.257-22.369 9.257z' /%3E%3C/svg%3E");
`,L=a.div`
  display: flex;
  justify-content: space-between;
  align-items: end;
`,K=a.div`
  display: flex;
  align-items: center;
  height: 42px;

  > span {
    cursor: pointer;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-md);
    height: 100%;
  }

  > span.active {
    border-bottom: 2px solid var(--border-color-primary);
  }
`,S=a.div`
  margin-top: var(--spacing-base);
`;export{U as ArrowIcon,_ as TAB_ACTIONS_PORTAL_ID,P as default};
