import*as e from"react";import{useQueryClient as z,useMutation as B,useQuery as H}from"@tanstack/react-query";import v from"styled-components";import{Flex as V}from"@redocly/portal-legacy-ui";import{Button as $}from"@redocly/theme/components/Button/Button";import{Admonition as A}from"@redocly/theme/markdoc/components/Admonition/Admonition";import{AppCustomAttributes as Q}from"@redocly/theme/components/ApiOnboarding/AppCustomAttributes";import{usePreloadHistory as G}from"../../../../client/app/usePreloadHistory";import{useTranslate as K}from"../../../../client/app/hooks";import W from"./components/ApisList";import{ButtonWithLoading as J}from"./components/ButtonWithLoading";import{Dialog as X}from"./components/Dialog";import{ButtonsContainer as Y}from"./components/RollAPIKey";import{MAX_DESCRIPTION_LENGTH as k,CharacterCounter as Z}from"./components/CharacterCounter";import{DialogHelperText as ee,DialogInputMultiline as S,DialogRow as c,DialogRowContent as p,DialogRowTitle as m,DialogTitleInput as te}from"./components/DialogStyledComponents";const Ce=e.forwardRef((le,w)=>{const{data:I}=H({queryKey:["DEV_ONBOARDING_META"],staleTime:1/0,queryFn:async()=>{const t=await fetch("/api/api-keys/meta");if(!t.ok)throw new Error(`Failed to load meta: ${t.status}`);return t.json()}}),d=(I?.adapters||[]).some(t=>t.capabilities.callbackUrls),[r,P]=e.useState(""),[n,D]=e.useState(""),[u,U]=e.useState(void 0),x=z(),[R,T]=e.useState({}),[N,O]=e.useState(!0),[g,h]=e.useState(""),[L,o]=e.useState(!1),E=G(),f=new URLSearchParams(E.location.search),[y,_]=e.useState([]),{translate:a}=K(),C=f.has("createApp");e.useEffect(()=>{C&&o(!0)},[C]);const F=e.useCallback((t,q)=>{T(t),O(q)},[]),l=B({mutationFn:()=>fetch("/api/api-keys/apps",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:r,name:r,description:n,callbackUrl:d?u:void 0,apiProductIds:y,attributes:R})}).then(t=>t.json()),onSuccess:t=>{t.error?h(t.error):(E.push("/apps/"+t.id),x.invalidateQueries({queryKey:["APPS"]}),s(),h(""))}}),b=()=>o(!0),s=()=>o(!1);e.useImperativeHandle(w,()=>({open:b}));const M=t=>{_(t||[])},j=async()=>{await l.mutateAsync()},i=/^[a-z][a-z0-9._\-$%#\s]*$/gi.test(r);return e.createElement(e.Fragment,null,e.createElement(X,{open:L,onOpen:b,onClose:s},e.createElement(ae,null,e.createElement(V,{justifyContent:"space-between",alignItems:"center",mb:"2em"},e.createElement(te,{error:!!r&&!i,value:r,onChange:t=>P(t.target.value),placeholder:a("dev.create.app.dialog.appName.placeholder","App name")}),!!r&&!i&&e.createElement(re,null,a("dev.create.app.dialog.appName.error","Name must start with a letter and can only contain: letters, numbers, spaces, ., _, -, $, %, #"))),e.createElement(c,null,e.createElement(m,{"data-translation-key":"dev.create.app.dialog.selectAPIs"},a("dev.create.app.dialog.selectAPIs","Select APIs")),e.createElement(p,null,e.createElement(W,{initialEnabledApis:f.getAll("apiId"),onChange:M}))),e.createElement(c,null,e.createElement(m,{"data-translation-key":"dev.create.app.dialog.description"},a("dev.create.app.dialog.description","Description")),e.createElement(p,null,e.createElement(S,{maxLength:k,value:n,onChange:t=>D(t.target.value),placeholder:a("dev.create.app.dialog.description.placeholder","Empty"),rows:6}))),e.createElement(Z,null,n.length,"/",k),d&&e.createElement(c,null,e.createElement(m,{"data-translation-key":"dev.create.app.dialog.callbackUrls"},a("dev.create.app.dialog.callbackUrls","Callback URLs")),e.createElement(p,null,e.createElement(S,{value:u,onChange:t=>U(t.target.value),placeholder:a("dev.create.app.dialog.callbackUrls.placeholder","https://example.com/callback"),rows:3}),e.createElement(ee,{"data-translation-key":"dev.create.app.dialog.callbackUrls.hint"},a("dev.create.app.dialog.callbackUrls.hint","Separate multiple URLs with a comma")))),e.createElement(Q,{onChange:F}),l.error?e.createElement(A,{type:"danger"},l.error.message):null,e.createElement(Y,null,e.createElement($,{onClick:s,size:"large",variant:"text"},a("dev.create.app.dialog.cancel","Cancel")),e.createElement(J,{variant:"primary",onClick:j,loading:l.isPending,disabled:!N||l.isPending||!i||y.length<1,"data-translation-key":"dev.create.app.dialog.create"},a("dev.create.app.dialog.create","Create application"))),g&&e.createElement(A,{type:"danger"},g))))}),ae=v.div`
  width: 664px;
  min-height: 428px;
  display: flex;
  flex-direction: column;
`,re=v.span`
  padding-top: 5px;
  color: var(--color-error-base);
  font-size: 0.9em;
`;export{Ce as CreateAppDialog};
