import*as e from"react";import{useQuery as b}from"@tanstack/react-query";import{useParams as g}from"react-router-dom";import t from"styled-components";import{CodeBlock as f}from"@redocly/theme/components/CodeBlock/CodeBlock";import{fetch as v}from"../../../../../client/app/utils";import y from"./LogStatusCode";import{getReadableDate as h}from"./getReadableDate";import{Headers as E}from"./Headers";function x(m){const{logId:a}=m,[s,p]=e.useState(0),{id:u}=g(),{data:r}=b({refetchOnWindowFocus:!1,queryKey:["API-LOGS-"+a],queryFn:()=>v(`/api/api-keys/apps/${u}/logs/${a}`).then(n=>n.json())}),c=[{name:"Request",content:r?.request},{name:"Response",content:r?.response}];if(!a||!r)return e.createElement(d,null);const o=c[s].content;return e.createElement(d,null,e.createElement(w,null,e.createElement(l,null,r.path)),e.createElement(k,null,e.createElement("span",null,"Status"),e.createElement("span",null,e.createElement(y,{statusCode:r.statusCode.toString()})),e.createElement("span",null,"ID"),e.createElement("span",null,r.id),e.createElement("span",null,"Time"),e.createElement("span",null,h(r.timestamp,{hour:"numeric",minute:"numeric",second:"numeric"})),e.createElement("span",null,"IP Address"),e.createElement("span",null,r.ipAddress)),e.createElement(C,null,e.createElement(T,null,c.map(({name:n},i)=>e.createElement(S,{key:n,className:s===i?"active":"",onClick:()=>p(i)},n))),e.createElement(z,null,e.createElement(l,null,"Headers"),Object.keys(o?.headers||{}).length?e.createElement(E,{headers:o?.headers||{}}):e.createElement("span",null,"No headers"))),o?.body&&e.createElement(e.Fragment,null,e.createElement(l,null,"Body"),e.createElement(A,{lang:"json",source:o.body,withLineNumbers:!0})))}const d=t.div`
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  border-top: 1px solid var(--border-color-primary);
  border-bottom: 1px solid var(--border-color-primary);
  background-color: var(--logs-active-row-background-color, var(--wide-tile-bg-color));
  padding: 0 24px 16px 32px;
  width: 50%;

  word-break: break-all;
`,w=t.div`
  display: flex;
  justify-content: space-between;
`,l=t.div`
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  padding: var(--spacing-base) 0;
`,k=t.div`
  display: grid;
  row-gap: var(--spacing-sm);
  grid-template-columns: 1fr 2fr;
  font-size: var(--font-size-base);
  min-height: 24px;
  padding: var(--spacing-base) 0;
  border-bottom: 1px solid var(--border-color-primary);
  color: var(--text-color-secondary);

  > span {
    min-height: 24px;
  }
`,C=t.div``,T=t.div`
  display: flex;
`,S=t.div`
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: var(--line-height-md);

  &.active {
    border-bottom: 2px solid var(--border-color-primary);
  }
`,z=t.div``,A=t(f)`
  padding: 0;
  background-color: transparent;

  .code-line {
    color: #4e5356;
  }

  .token {
    &.property {
      color: var(--text-color-secondary);
    }

    &.string {
      color: #308c88;
    }

    &.boolean,
    &.number {
      color: #4478d4;
    }
  }
`;export{x as default};
