import*as i18n from"../../../core/i18n/i18n.js";import*as DataGrid from"../../../ui/components/data_grid/data_grid.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Root from"../../../core/root/root.js";import reportingApiGridStyles from"./reportingApiGrid.css.js";const UIStrings={noReportsToDisplay:"No reports to display",status:"Status",destination:"Destination",generatedAt:"Generated at"},str_=i18n.i18n.registerUIStrings("panels/application/components/ReportsGrid.ts",UIStrings);export const i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);const{render:render,html:html}=LitHtml;export class ReportsGridStatusHeader extends HTMLElement{static litTagName=LitHtml.literal`devtools-resources-reports-grid-status-header`;#t=this.attachShadow({mode:"open"});connectedCallback(){this.#t.adoptedStyleSheets=[reportingApiGridStyles],this.#e()}#e(){render(html`
      ${i18nString(UIStrings.status)}
      <x-link href="https://web.dev/reporting-api/#report-status">
        <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{iconName:"help",color:"var(--icon-link)",width:"16px",height:"16px"}}></${IconButton.Icon.Icon.litTagName}>
      </x-link>
    `,this.#t,{host:this})}}export class ReportsGrid extends HTMLElement{static litTagName=LitHtml.literal`devtools-resources-reports-grid`;#t=this.attachShadow({mode:"open"});#i=[];#o=!1;connectedCallback(){this.#t.adoptedStyleSheets=[reportingApiGridStyles],this.#o=Root.Runtime.experiments.isEnabled("protocolMonitor"),this.#e()}set data(t){this.#i=t.reports,this.#e()}#e(){const t={columns:[{id:"url",title:i18n.i18n.lockedString("URL"),widthWeighting:30,hideable:!1,visible:!0},{id:"type",title:i18n.i18n.lockedString("Type"),widthWeighting:20,hideable:!1,visible:!0},{id:"status",title:i18nString(UIStrings.status),widthWeighting:20,hideable:!1,visible:!0,titleElement:html`
          <${ReportsGridStatusHeader.litTagName}></${ReportsGridStatusHeader.litTagName}>
          `},{id:"destination",title:i18nString(UIStrings.destination),widthWeighting:20,hideable:!1,visible:!0},{id:"timestamp",title:i18nString(UIStrings.generatedAt),widthWeighting:20,hideable:!1,visible:!0},{id:"body",title:i18n.i18n.lockedString("Body"),widthWeighting:20,hideable:!1,visible:!0}],rows:this.#r()};this.#o&&t.columns.unshift({id:"id",title:"ID",widthWeighting:30,hideable:!1,visible:!0}),render(html`
      <div class="reporting-container">
        <div class="reporting-header">${i18n.i18n.lockedString("Reports")}</div>
        ${this.#i.length>0?html`
          <${DataGrid.DataGridController.DataGridController.litTagName} .data=${t}>
          </${DataGrid.DataGridController.DataGridController.litTagName}>
        `:html`
          <div class="reporting-placeholder">
            <div>${i18nString(UIStrings.noReportsToDisplay)}</div>
          </div>
        `}
      </div>
    `,this.#t,{host:this})}#r(){return this.#i.map((t=>({cells:[{columnId:"id",value:t.id},{columnId:"url",value:t.initiatorUrl},{columnId:"type",value:t.type},{columnId:"status",value:t.status},{columnId:"destination",value:t.destination},{columnId:"timestamp",value:new Date(1e3*t.timestamp).toLocaleString()},{columnId:"body",value:JSON.stringify(t.body)}]})))}}ComponentHelpers.CustomElements.defineComponent("devtools-resources-reports-grid-status-header",ReportsGridStatusHeader),ComponentHelpers.CustomElements.defineComponent("devtools-resources-reports-grid",ReportsGrid);