import{LitElement as e,html as t,css as s}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{createRef as i,ref as l}from"lit/directives/ref.js";import{iconRemixFullscreenExitLine as o,iconRemixFullscreenLine as r}from"./assets/cc-remix.icons.js";import{i18n as c}from"./translation.js";import"./cc-loader.js";import"./cc-logs-control.js";import"./cc-logs-date-range-selector.js";import{buildLogsLoadingProgressState as n}from"./cc-logs-loading-progress-state-builder.js";import"./cc-logs-loading-progress.js";import"./cc-logs-message-filter.js";import"./cc-notice.js";const p={ip:{size:15},country:{size:2},city:{size:12},method:e=>({text:e.value.toUpperCase(),size:7}),status:e=>({intent:function(){const t=Number(e.value);return t>=600?"neutral":t>=500?"danger":t>=400?"warning":t>=300?"info":t>=200?"success":"neutral"}(),size:3})};class g extends e{static get properties(){return{dateRangeSelection:{type:Object,attribute:"date-range-selection"},limit:{type:Number},options:{type:Object},state:{type:Object},_fullscreen:{type:Boolean,state:!0},_messageFilter:{type:Object,state:!0}}}constructor(){super(),this.dateRangeSelection={type:"live"},this.limit=1e3,this.options={"date-display":"datetime-iso","metadata-display":{ip:!0,country:!0,city:!0},palette:"default","strip-ansi":!1,timezone:"UTC","wrap-lines":!1},this.state={type:"loaded",streamState:{type:"idle"}},this._logsRef=i(),this._messageFilter={value:"",mode:"loose"},this._fullscreen=!1}appendLogs(e){this._logsRef.value?.appendLogs(e)}clear(){this._logsRef.value?.clear()}_getMetadataDisplay(){return{ip:{label:c("cc-logs-app-access.options.ip"),hidden:!this.options["metadata-display"].ip},country:{label:c("cc-logs-app-access.options.country"),hidden:!this.options["metadata-display"].country},city:{label:c("cc-logs-app-access.options.city"),hidden:!this.options["metadata-display"].city}}}_onDateRangeSelectionChange(e){this.dateRangeSelection=e.detail.selection}_onFullscreenToggle(){this._fullscreen=!this._fullscreen}_onMessageFilterChange({detail:e}){this._messageFilter=e}render(){const e={fullscreen:this._fullscreen};return t`
      <div class="overlay ${a(e)}">
        <div class="wrapper ${a(e)}">
          <div class="logs-wrapper">${this._renderLogs()}</div>
          ${this._renderLoadingProgress()}
        </div>
      </div>
    `}_renderLoadingProgress(){const e=n(this.state.streamState);return null==e?null:t`<cc-logs-loading-progress-beta
      class="progress"
      .state=${e}
      limit=${this.limit}
    ></cc-logs-loading-progress-beta>`}_renderLogs(){return"loaded"===this.state.type&&"error"===this.state.streamState.type?t`
        <div class="center-logs-wrapper">
          <cc-notice slot="header" intent="warning" message=${c("cc-logs-app-access.error")}></cc-notice>
        </div>
      `:t`
      <cc-logs-control-beta
        ${l(this._logsRef)}
        class="logs"
        follow
        limit="${this.limit}"
        .dateDisplay=${this.options["date-display"]}
        .messageFilter=${this._messageFilter.value}
        .messageFilterMode=${this._messageFilter.mode}
        .metadataDisplay=${this._getMetadataDisplay()}
        .metadataRenderers=${p}
        .palette=${this.options.palette}
        .timezone=${this.options.timezone}
        .wrapLines=${this.options["wrap-lines"]}
      >
        <div slot="header" class="logs-header">
          <cc-logs-date-range-selector-beta
            .value=${this.dateRangeSelection}
            @cc-logs-date-range-selection-change=${this._onDateRangeSelectionChange}
          ></cc-logs-date-range-selector-beta>

          <cc-logs-message-filter-beta
            class="logs-message-filter"
            .filter=${this._messageFilter}
            @cc-logs-message-filter-change=${this._onMessageFilterChange}
          ></cc-logs-message-filter-beta>

          <cc-button
            class="header-fullscreen-button"
            .icon=${this._fullscreen?o:r}
            a11y-name=${this._fullscreen?c("cc-logs-app-access.fullscreen.exit"):c("cc-logs-app-access.fullscreen")}
            hide-text
            @cc-click=${this._onFullscreenToggle}
          ></cc-button>
        </div>
      </cc-logs-control-beta>

      ${"loaded"===this.state.type&&"completed"===this.state.streamState.type&&0===this.state.streamState.progress.value?t`
            <div class="overlay-logs-wrapper">
              <cc-notice
                intent="info"
                heading=${c("cc-logs-app-access.no-logs.title")}
                message=${c("cc-logs-app-access.no-logs.message")}
              ></cc-notice>
            </div>
          `:""}
      ${"loaded"!==this.state.type||"idle"!==this.state.streamState.type&&"connecting"!==this.state.streamState.type?"":t`
            <div class="overlay-logs-wrapper">
              <cc-notice intent="info" no-icon>
                <div class="overlay-logs-wrapper--loader" slot="message">
                  <cc-loader></cc-loader>
                  <span>${c("cc-logs-app-access.loading")}</span>
                </div>
              </cc-notice>
            </div>
          `}
      ${"loaded"===this.state.type&&"waitingForFirstLog"===this.state.streamState.type?t`
            <div class="overlay-logs-wrapper">
              <cc-notice
                intent="info"
                heading=${c("cc-logs-app-access.waiting.title")}
                message=${c("cc-logs-app-access.waiting.message")}
              ></cc-notice>
            </div>
          `:""}
    `}static get styles(){return[s`
        /* stylelint-disable no-duplicate-selectors */
        :host {
          display: block;
        }

        .overlay {
          display: flex;
          height: 100%;
        }

        .overlay.fullscreen {
          backdrop-filter: blur(5px);
          bottom: 0;
          left: 0;
          position: fixed;
          right: 0;
          top: 0;
          z-index: 999;
        }

        .wrapper {
          display: grid;
          flex: 1;
          gap: 0.5em;
          grid-auto-rows: 1fr auto;
        }

        .wrapper.fullscreen {
          background-color: var(--cc-color-bg-default);
          border: 1px solid var(--cc-color-border-neutral);
          border-radius: var(--cc-border-radius-default);
          margin: 1em;
          padding: 1em;
        }

        .logs-wrapper {
          position: relative;
        }

        .logs {
          height: 100%;
        }

        .logs-header {
          align-items: center;
          display: flex;
          gap: 1em;
          width: 100%;
        }

        .logs-message-filter {
          flex: 1;
        }

        .center-logs-wrapper {
          align-items: center;
          display: flex;
          flex-direction: row;
          height: 100%;
          justify-content: center;
        }

        .overlay-logs-wrapper {
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
        }

        .overlay-logs-wrapper--loader {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .overlay-logs-wrapper--loader cc-loader {
          height: 1.5em;
          width: 1.5em;
        }
      `]}}window.customElements.define("cc-logs-app-access-beta",g);export{g as CcLogsAppAccess};
//# sourceMappingURL=cc-logs-app-access.js.map
