import{LitElement as e,html as o,css as t}from"lit";import{classMap as c}from"lit/directives/class-map.js";import{iconRemixAlertFill as s,iconRemixInformationFill as r,iconRemixPauseLine as i,iconRemixPlayLine as n}from"./assets/cc-remix.icons.js";import{i18n as a}from"./translation.js";import"./cc-button.js";import"./cc-icon.js";import{CcLogsLoadingPauseEvent as l,CcLogsLoadingResumeEvent as g,CcLogsLoadingOverflowAcceptEvent as d,CcLogsLoadingOverflowDiscardEvent as p}from"./components/cc-logs-loading-progress/cc-logs-loading-progress.events.js";class m extends e{static get properties(){return{limit:{type:Number},state:{type:Object}}}constructor(){super(),this.state={type:"idle"},this.limit=1e3}_getLoadingProgressMessage(e,o){return 0===e?a("cc-logs-loading-progress.progress.none"):null==o?a("cc-logs-loading-progress.progress.indeterminate",{count:e}):a("cc-logs-loading-progress.progress.percentage",{count:e,percent:o/100})}_onPause(){this.dispatchEvent(new l)}_onResume(){this.dispatchEvent(new g)}_onAcceptOverflow(){this.dispatchEvent(new d)}_onDiscardOverflow(){this.dispatchEvent(new p)}render(){if("idle"===this.state.type)return null;const e="completed"===this.state.type?100:this.state.percent,t="overflowLimitReached"===this.state.type,i=("running"===this.state.type||"paused"===this.state.type||"completed"===this.state.type)&&this.state.overflowing;return o`
      <div class="wrapper ${c({warning:t})}">
        <div class="content inline">
          ${this._renderPlayPauseButton()}
          ${t?o`
                  <div class="notice warning">
                    <cc-icon .icon="${s}" a11y-name="${a("cc-notice.icon-alt.warning")}"></cc-icon>
                    <div class="notice-message">
                      <div>${a("cc-logs-loading-progress.overflow.warning",{limit:this.limit})}</div>
                      <div class="overflow-buttons">
                        <cc-button link @cc-click=${this._onAcceptOverflow}>
                          ${a("cc-logs-loading-progress.overflow.accept")}
                        </cc-button>
                        <cc-button link @cc-click=${this._onDiscardOverflow}>
                          ${a("cc-logs-loading-progress.overflow.discard")}
                        </cc-button>
                      </div>
                    </div>
                  </div>
                `:""}
          ${t?"":o`<div class="loading-progress-message">
                  ${this._getLoadingProgressMessage(this.state.value,e)}
                </div>`}
          ${i?o`
                  <div class="notice info">
                    <cc-icon .icon="${r}" a11y-name="${a("cc-notice.icon-alt.info")}"></cc-icon>
                    <div class="notice-message">
                      ${a("cc-logs-loading-progress.overflow.info",{limit:this.limit})}
                    </div>
                  </div>
                `:""}
        </div>
        ${null!=e?o`
                <div class="progress-bar">
                  <div class="progress-bar-track" style="width: ${e}%;"></div>
                </div>
              `:""}
      </div>
    </div>`}_renderPlayPauseButton(){const e="running"===this.state.type,t="paused"===this.state.type;return e||t?o`
      <cc-button
        .icon=${e?i:n}
        hide-text
        a11y-name=${a(e?"cc-logs-loading-progress.control.pause":"cc-logs-loading-progress.control.resume")}
        @cc-click=${e?this._onPause:this._onResume}
      ></cc-button>
    `:null}static get styles(){return[t`
        :host {
          display: block;
        }

        .wrapper {
          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);
        }

        .wrapper.warning {
          background-color: var(--cc-color-bg-warning-weaker);
          border: 1px solid var(--cc-color-border-warning-weak);
        }

        .content {
          align-items: center;
          color: var(--cc-color-text-weak);
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
          height: 1.75em;
          padding: 0.5em;
        }

        .overflow-buttons {
          display: flex;
          gap: 0.5em;
        }

        .loading-progress-message {
          flex: 1;
        }

        .notice {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .notice-message {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        .notice cc-icon {
          min-height: 1.5em;
          min-width: 1.5em;
        }

        .notice.info cc-icon {
          --cc-icon-color: var(--cc-color-text-primary);
        }

        .notice.warning cc-icon {
          --cc-icon-color: var(--cc-color-text-warning);
        }

        .progress-bar {
          background-color: var(--cc-color-bg-primary-weak);
          height: 0.2em;
          overflow: hidden;
          width: 100%;
        }

        .progress-bar-track {
          background-color: var(--cc-color-bg-primary);
          height: 100%;
        }
      `]}}window.customElements.define("cc-logs-loading-progress-beta",m);export{m as CcLogsLoadingProgress};
//# sourceMappingURL=cc-logs-loading-progress.js.map
