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

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

  > span {
    padding: 10px 8px;
    max-width: 170px;
    word-break: break-all;
  }
`,$=r.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-base);
  margin-top: auto;
  padding-top: 30px;
`,D=r.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=r.div`
  display: flex;
  flex-direction: column;
  min-height: 428px;
  width: 344px;
`;export{$ as ButtonsContainer,_ as default};
