import*as e from"react";import{useMutation as A,useQueryClient as D}from"@tanstack/react-query";import{useParams as S}from"react-router-dom";import{Button as N}from"@redocly/theme/components/Button/Button";import{H2 as w}from"@redocly/theme/components/Typography/H2";import{Admonition as I}from"@redocly/theme/markdoc/components/Admonition/Admonition";import{useTranslate as K}from"../../../../../client/app/hooks";import{Dialog as O}from"./Dialog";import{ButtonWithLoading as R}from"./ButtonWithLoading";import{ButtonsContainer as B}from"./RollAPIKey";import{DialogInput as T,DialogRow as $,DialogRowContent as b}from"./DialogStyledComponents";const M=e.forwardRef((g,f)=>{const{id:o}=S(),{appName:y,appDisplayName:v}=g,t=v||y||"",[a,n]=e.useState(t),[E,m]=e.useState(!1),h=s=>n(s.target.value),{translate:i}=K(),p=async()=>{await k(),l()},C=s=>{s.key==="Enter"&&!r&&u&&p()},d=()=>{m(!0)};e.useImperativeHandle(f,()=>({open:d}));const l=()=>{m(!1),n(t)};e.useEffect(()=>{n(t)},[t]);const P=D(),{mutateAsync:k,isPending:r,error:c}=A({mutationKey:["UPDATE_APP"+o],mutationFn:()=>fetch(`/api/api-keys/apps/${o}`,{method:"PUT",body:JSON.stringify({name:a})}),onSettled:()=>{P.invalidateQueries({queryKey:["APPS","APP:"+o]}),n(a)}}),u=/^(?!\s*$).{1,100}$/gi.test(a);return e.createElement(O,{open:E,onClose:l,onOpen:d},e.createElement(e.Fragment,null,e.createElement(w,{"data-translation-key":"dev.edit.app.dialog.title"},i("dev.edit.app.dialog.title","Change display name")),e.createElement($,null,e.createElement(b,null,e.createElement(T,{value:a,onChange:h,onKeyPress:C}))),c&&e.createElement(I,{type:"danger"},c.message," "),e.createElement(B,null,e.createElement(N,{onClick:l,"data-translation-key":"dev.edit.app.dialog.cancel",variant:"text",size:"large"},i("dev.edit.app.dialog.cancel","Cancel")),e.createElement(R,{variant:"primary",loading:r,onClick:p,disabled:r||!u,"data-translation-key":"dev.edit.app.dialog.save"},i("dev.edit.app.dialog.save","Save changes")))))});export{M as EditAppDialog};
