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 r,iconRemixFullscreenLine as o}from"./assets/cc-remix.icons.js";import{i18n as n}from"./translation.js";import"./cc-loader.js";import"./cc-logs-control.js";import"./cc-logs-date-range-selector.js";import"./cc-logs-instances.js";import{buildLogsLoadingProgressState as c}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 d={instanceId:()=>({hidden:!0}),instance:{strong:!0,size:18}};class g extends e{static get properties(){return{dateRangeSelection:{type:Object,attribute:"date-range-selection"},limit:{type:Number},options:{type:Object},selectedInstances:{type:Array,attribute:"selected-instances"},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":{instance:!1},palette:"default","strip-ansi":!1,timezone:"UTC","wrap-lines":!1},this.selectedInstances=[],this.state={type:"loadingInstances"},this._logsRef=i(),this._messageFilter={value:"",mode:"loose"},this._metadataDisplay={instance:{label:n("cc-logs-app-runtime.options.display-instance"),hidden:!this.options["metadata-display"].instance}},this._fullscreen=!1}appendLogs(e){this._logsRef.value?.appendLogs(e)}clear(){this._logsRef.value?.clear()}_onDateRangeSelectionChange(e){this.dateRangeSelection=e.detail.selection}_onFullscreenToggle(){this._fullscreen=!this._fullscreen}_onMessageFilterChange({detail:e}){this._messageFilter=e}willUpdate(e){e.has("options")&&(this._metadataDisplay={instance:{label:this._metadataDisplay.instance.label,hidden:!this.options["metadata-display"].instance}})}render(){const e={overlay:!0,fullscreen:this._fullscreen},s={wrapper:!0,fullscreen:this._fullscreen};return t`
      <div class=${a(e)}>
        <div class=${a(s)}>
          <div class="logs-wrapper">${this._renderLogs()}</div>
          ${this._renderLoadingProgress()}
        </div>
      </div>
    `}_renderInstances(){let e;return e="loadingInstances"===this.state.type?{state:"loading"}:"errorInstances"===this.state.type?{state:"error"}:{state:"loaded",mode:"live"===this.dateRangeSelection.type?"live":"cold",instances:this.state.instances,selection:this.state.selection},t`<cc-logs-instances-beta class="instances" slot="left" .state=${e}></cc-logs-instances-beta>`}_renderLoadingProgress(){if("loadingInstances"===this.state.type||"errorInstances"===this.state.type)return null;const e=c(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(){if("loaded"===this.state.type&&"error"===this.state.streamState.type)return t`
        <div class="center-logs-wrapper">
          <cc-notice slot="header" intent="warning" message=${n("cc-logs-app-runtime.logs.error")}></cc-notice>
        </div>
      `;const e="loaded"!==this.state.type||"connecting"!==this.state.streamState.type&&"running"!==this.state.streamState.type&&"paused"!==this.state.streamState.type&&"completed"!==this.state.streamState.type?[]:this.state.selection?.map((e=>({metadata:"instanceId",value:e})));return t`
      <cc-logs-control-beta
        ${l(this._logsRef)}
        class="logs"
        follow
        limit="${this.limit}"
        .dateDisplay=${this.options["date-display"]}
        .metadataDisplay=${this._metadataDisplay}
        .messageFilter=${this._messageFilter.value}
        .messageFilterMode=${this._messageFilter.mode}
        .metadataFilter=${e}
        .metadataRenderers=${d}
        .palette=${this.options.palette}
        ?strip-ansi=${this.options["strip-ansi"]}
        .timezone=${this.options.timezone}
        ?wrap-lines=${this.options["wrap-lines"]}
      >
        <div slot="header" class="logs-header">
          <cc-logs-date-range-selector-beta
            class="date-range-selector"
            .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?r:o}
            a11y-name=${this._fullscreen?n("cc-logs-app-runtime.fullscreen.exit"):n("cc-logs-app-runtime.fullscreen")}
            hide-text
            @cc-click=${this._onFullscreenToggle}
          ></cc-button>
        </div>

        ${this._renderInstances()}
      </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=${n("cc-logs-app-runtime.logs.warning.no-logs.title")}
                message=${n("cc-logs-app-runtime.logs.warning.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>${n("cc-logs-app-runtime.logs.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=${n("cc-logs-app-runtime.logs.warning.waiting.title")}
                message=${n("cc-logs-app-runtime.logs.warning.waiting.message")}
              ></cc-notice>
            </div>
          `:""}
    `}static get styles(){return[s`
        /* stylelint-disable no-duplicate-selectors */
        :host {
          --instances-width: 20em;

          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: flex;
          flex: 1;
          flex-direction: column;
          gap: 0.5em;
        }

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

        .instances {
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          width: var(--instances-width);
        }

        .logs-wrapper {
          flex: 1;
          grid-area: logs;
          min-height: 0;
          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;
        }

        .progress {
          grid-area: progress;
        }

        .overlay-logs-wrapper {
          left: calc(50% + var(--instances-width) / 2);
          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-runtime-beta",g);export{g as CcLogsAppRuntime};
//# sourceMappingURL=cc-logs-app-runtime.js.map
