import*as e from"react";import o from"styled-components";import{useMutation as E,useQueryClient as x}from"@tanstack/react-query";import{useParams as A}from"react-router-dom";import{Button as b}from"@redocly/theme/components/Button/Button";import{H2 as P}from"@redocly/theme/components/Typography/H2";import{RenewIcon as I}from"@redocly/theme/icons/RenewIcon/RenewIcon";import{Admonition as R}from"@redocly/theme/markdoc/components/Admonition/Admonition";import{useTranslate as C}from"../../../../../client/app/l10n/hooks";import{Dialog as w}from"./Dialog";import{ButtonWithLoading as K}from"./ButtonWithLoading";import{Separator as z}from"./ApiKeys";import{getReadableDate as S}from"./AppOverview";const s=5;function _({apiKey:{expiresAt:t,clientId:n,clientSecret:l,id:y}}){const{id:r}=A(),{translate:a}=C(),g=x(),[u,d]=e.useState(!1),f=Number(t)>0?S(t):"Never",v=n||l,p=()=>d(!0),i=()=>d(!1),k=async()=>{await h()},{isPending:m,error:c,mutateAsync:h}=E({mutationKey:["ROLL_API_KEY"+r],mutationFn:()=>fetch(`/api/api-keys/apps/${r}/credentials/${y}`,{method:"PUT",body:JSON.stringify({clientId:n,clientSecret:l})}),onSuccess:()=>{g.invalidateQueries({queryKey:["APP:"+r]}),i()}});return e.createElement(e.Fragment,null,e.createElement($,{onClick:p},e.createElement("span",{"data-translation-key":"dev.app.key.roll"},a("dev.app.key.roll","Roll API key")),e.createElement(I,{size:"20px",color:"#161616"})),e.createElement(w,{open:u,onOpen:p,onClose:i},e.createElement(F,null,e.createElement(e.Fragment,null,e.createElement(P,{"data-translation-key":"dev.roll.key.dialog.title"},a("dev.roll.key.dialog.title","Roll API key")),e.createElement(O,null,e.createElement("span",{"data-translation-key":"dev.roll.key.dialog.apiKey"},a("dev.roll.key.dialog.apiKey","API key")),e.createElement("span",null,B(v||"")),e.createElement("span",{"data-translation-key":"dev.roll.key.dialog.expires"},a("dev.roll.key.dialog.expires","Expires")),e.createElement("span",null,f)),e.createElement(z,null),e.createElement("div",{"data-translation-key":"dev.roll.key.dialog.confirmation"},a("dev.roll.key.dialog.confirmation","Are you sure you want to roll this API key?")),c&&e.createElement(R,{type:"danger"},c.message),e.createElement(L,null,e.createElement(b,{onClick:i,"data-translation-key":"dev.roll.key.dialog.cancel",variant:"text",size:"large"},a("dev.roll.key.dialog.cancel","Cancel")),e.createElement(K,{variant:"primary",onClick:k,disabled:m,loading:m,"data-translation-key":"dev.roll.key.dialog.roll"},a("dev.roll.key.dialog.roll","Roll API key")))))))}function B(t){if(t.length>s*2){const n=t.slice(0,s),l=t.slice(-s);return`${n} . . . ${l}`}return t}const O=o.div`
  display: grid;
  grid-template-columns: 1fr 1fr;

  margin-top: 60px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-md);

  > span {
    padding: 10px var(--spacing-xs);
    max-width: 170px;
    word-break: break-all;
  }
`,L=o.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-base);
  margin-top: auto;
  padding-top: 30px;
`,$=o.div`
  display: flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  padding: 11px 14px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: var(--line-height-sm);
  border-radius: var(--border-radius);

  :hover {
    background: var(--color-red-2);
  }
`,F=o.div`
  display: flex;
  flex-direction: column;
  min-height: 428px;
  width: 344px;
`;export{L as ButtonsContainer,_ as default};
