import*as a from"react";import v from"react-dom";import{useQuery as y}from"@tanstack/react-query";import{useParams as E}from"react-router-dom";import i from"styled-components";import{fetch as D}from"../../../../../client/app/utils";import L from"../../../../../client/app/CircularProgress";import{TAB_ACTIONS_PORTAL_ID as F}from"../App";import A from"./ApiLogDetails";import x from"./ApiLogItem";import S from"./ApiLogsActions";import{getReadableDate as p}from"./getReadableDate";function C(){const[o,n]=a.useState(void 0),[e,c]=a.useState({}),s=a.useMemo(()=>R(e),[e]),{id:d}=E(),l=t=>{n(t.id)},u=()=>{const t=new URLSearchParams;return t.append("page","1"),e.api?.length&&e.api.forEach(r=>t.append("api",r.id)),e.method?.length&&e.method?.forEach(r=>t.append("method",r.id)),e.status?.length&&e.status?.forEach(r=>t.append("statusCode",r.id)),e.date?.type==="predefined"&&(e.date.fromDateOffset&&t.append("fromDate",(Date.now()-e.date.fromDateOffset).toString()),e.date.toDateOffset&&t.append("toDate",(Date.now()-e.date.toDateOffset).toString())),e.date?.type==="custom"&&(t.append("fromDate",e.date.fromDate.toString()),t.append("toDate",e.date.toDate.toString())),t.toString()},{data:m,isLoading:f}=y({queryKey:["API-LOGS-"+d,{activeFilters:e}],queryFn:()=>D(`/api/api-keys/apps/${d}/logs?${u()}`).then(t=>t.json()).then(t=>{const{data:r,total:h}=t;return h&&n(r[0].id),t}),refetchOnWindowFocus:!1}),g=a.useCallback(t=>c(t),[]);return a.createElement(a.Fragment,null,a.createElement(k,null,a.createElement(S,{onFiltersChange:g,activeFilters:e})),s.length>0?a.createElement(P,null,s.map((t,r)=>a.createElement(O,{key:r},t))):null,f?a.createElement(L,null):m?.data.length?a.createElement(I,null,a.createElement(b,null,m?.data.map(t=>a.createElement(x,{key:t.id,log:t,active:t.id===o,onClick:l}))),a.createElement(A,{logId:o})):a.createElement("p",null,"There are no logs yet."))}const I=i.div`
  display: flex;
`,b=i.div`
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  border-top: 1px solid var(--border-color-primary);
`,P=i.div`
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-base);
`,O=i.div`
  color: var(--text-color-secondary);
  border-radius: 32px;
  padding: var(--spacing-xxs) var(--spacing-xs);
  background-color: var(--bg-color);
  font-size: var(--font-size-base);
`,k=o=>{const n=document.getElementById(F),[e]=a.useState(document.createElement("div"));return a.useEffect(()=>(n?.appendChild(e),()=>{n?.removeChild(e)}),[e,n]),v.createPortal(o.children,e)};function R(o){const n=[];if(o.method?.length&&n.push(...o.method.map(e=>e.name)),o.api?.length&&n.push(...o.api.map(e=>`API: ${e.name}`)),o.status?.length&&n.push(...o.status.map(e=>e.name)),o.date?.type==="predefined")n.push(o.date.name);else if(o.date?.type==="custom"){const e={hour:"numeric",minute:"numeric",second:"numeric"};n.push(`${p(o.date.fromDate,e)} - ${p(o.date.toDate,e)}`)}return n}export{C as default};
