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