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 k from"./components/CreateApiKey";import{Description as I}from"./components/Description";import{CallbackUrl as _}from"./components/CallbackUrl";const B="app-tab-actions-portal",m="api_keys",P="logs";function L(D){const{id:s}=b(),{isLoading:p,error:l,data:t}=f({queryKey:["APP:"+s],queryFn:()=>fetch(`/api/api-keys/apps/${s}`).then(n=>n.json())}),{translate:c}=E(),d=n=>o.findIndex(r=>r.id===n),o=[{id:m,name:c("dev.main.tab.appKeys","API keys"),content:e.createElement(e.Fragment,null,e.createElement(T,{credentials:t?.credentials,attributes:t?.attributes}),e.createElement(I,{text:t?.description}),t?.callbackUrl!==void 0&&e.createElement(_,{text:t.callbackUrl})),show:!0},{id:P,name:c("dev.main.tab.logs","Logs"),content:e.createElement(C,null),show:!!t?.supportsLogs}].filter(n=>n.show),[i,g]=e.useState(0),u=t?.canCreateKey&&i===d(m);return e.createElement(h,{my:"2rem"},e.createElement(A,null,p?e.createElement(v,{justifyContent:"center",mt:"2em"},e.createElement(x,null)):l?e.createElement(y,{type:"danger"},l?.message??"Something went wrong"):t?e.createElement(e.Fragment,null,e.createElement(w,{app:t}),e.createElement(K,null,e.createElement(S,null,o.map(({name:n},r)=>e.createElement("span",{key:n,className:i===r?"active":"",onClick:()=>g(r)},n))),e.createElement("div",{id:B}),u&&e.createElement(k,{initialEnabledApis:(t.credentials||[]).flatMap(n=>n.apiProductIds||[])})),e.createElement(z,null,o[i].content)):null))}const W=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");
`,K=a.div`
  display: flex;
  justify-content: space-between;
  align-items: end;
`,S=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);
  }
`,z=a.div`
  margin-top: var(--spacing-base);
`;export{W as ArrowIcon,B as TAB_ACTIONS_PORTAL_ID,L as default};
