import*as e from"react";import o from"styled-components";import{Flex as c}from"@redocly/portal-legacy-ui";import{AddIcon as m}from"@redocly/theme/icons/AddIcon/AddIcon";import{useTranslate as u}from"../../../../../client/app/hooks";import{useKeyStatus as f}from"./StatusRow";import g from"./EditApis";import{Link as v}from"../../../../../client/app/Link";import{useGlobalData as E}from"../../../../../client/app/useGlobalData";function z(n){const{apiProductsStatuses:t,secret:i}=n,{translate:a}=u(),p=e.useMemo(()=>t?.map(r=>r.apiId||r.id),[t]),[d,s]=e.useState(!1);return e.createElement(c,{flexDirection:"column",flexGrow:1},e.createElement(g,{open:d,id:n.id,onClose:()=>s(!1),initialEnabledApis:p,secret:i}),e.createElement(k,null,e.createElement(l,null,e.createElement("strong",{"data-translation-key":"dev.app.key.api.name"},a("dev.app.key.api.name","API Name")),e.createElement("strong",{"data-translation-key":"dev.app.key.api.status"},a("dev.app.key.api.status","Status"))),t.map(r=>e.createElement(l,{key:r.name},e.createElement(y,{apiProduct:r})))),e.createElement(x,{onClick:()=>s(!0)},e.createElement("span",{"data-translation-key":"dev.app.key.api.edit"},a("dev.app.key.api.edit","Edit APIs")),e.createElement(m,null)))}function y(n){const{apiProduct:t}=n,{apiProducts:i={}}=E(),a=i?.[t.id]??void 0;return e.createElement(e.Fragment,null,a&&e.createElement(b,{to:a.slug},t.name),!a&&e.createElement("span",null,t.name),f(t.status))}const k=o.div`
  display: flex;
  flex-grow: 1;
  flex-direction: column;

  > * {
    border-bottom: 1px solid var(--border-color-primary);
  }
`,l=o.div`
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 2fr 1fr;
  align-items: center;

  > * {
    padding: 14px 16px;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
`,x=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(--bg-color-raised);
  }
`,b=o(v)`
  color: inherit;
  text-decoration: none;

  &:hover {
    color: var(--link-color-primary);
  }
`;export{z as ApiKeyProductsStatus};
