import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { computeTimingsViewData } from '../../lib/http/Har.js';
import ApiElement from '../ApiElement.js';
import '../../md/date/ui-date-time.js';
import '../../md/progress/ui-progress.js';
let LogTimings = (() => {
    let _classSuper = ApiElement;
    let _timings_decorators;
    let _timings_initializers = [];
    let _timings_extraInitializers = [];
    let _narrow_decorators;
    let _narrow_initializers = [];
    let _narrow_extraInitializers = [];
    let _withRedirects_decorators;
    let _withRedirects_initializers = [];
    let _withRedirects_extraInitializers = [];
    let _viewData_decorators;
    let _viewData_initializers = [];
    let _viewData_extraInitializers = [];
    let _totalTime_decorators;
    let _totalTime_initializers = [];
    let _totalTime_extraInitializers = [];
    return class LogTimings extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _timings_decorators = [property({ type: Array })];
            _narrow_decorators = [property({ type: Boolean, reflect: true })];
            _withRedirects_decorators = [state()];
            _viewData_decorators = [state()];
            _totalTime_decorators = [state()];
            __esDecorate(this, null, _timings_decorators, { kind: "accessor", name: "timings", static: false, private: false, access: { has: obj => "timings" in obj, get: obj => obj.timings, set: (obj, value) => { obj.timings = value; } }, metadata: _metadata }, _timings_initializers, _timings_extraInitializers);
            __esDecorate(this, null, _narrow_decorators, { kind: "accessor", name: "narrow", static: false, private: false, access: { has: obj => "narrow" in obj, get: obj => obj.narrow, set: (obj, value) => { obj.narrow = value; } }, metadata: _metadata }, _narrow_initializers, _narrow_extraInitializers);
            __esDecorate(this, null, _withRedirects_decorators, { kind: "accessor", name: "withRedirects", static: false, private: false, access: { has: obj => "withRedirects" in obj, get: obj => obj.withRedirects, set: (obj, value) => { obj.withRedirects = value; } }, metadata: _metadata }, _withRedirects_initializers, _withRedirects_extraInitializers);
            __esDecorate(this, null, _viewData_decorators, { kind: "accessor", name: "viewData", static: false, private: false, access: { has: obj => "viewData" in obj, get: obj => obj.viewData, set: (obj, value) => { obj.viewData = value; } }, metadata: _metadata }, _viewData_initializers, _viewData_extraInitializers);
            __esDecorate(this, null, _totalTime_decorators, { kind: "accessor", name: "totalTime", static: false, private: false, access: { has: obj => "totalTime" in obj, get: obj => obj.totalTime, set: (obj, value) => { obj.totalTime = value; } }, metadata: _metadata }, _totalTime_initializers, _totalTime_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #timings_accessor_storage = __runInitializers(this, _timings_initializers, void 0);
        /**
         * The ordered list of timings for each redirect.
         * The last timing is the final request.
         */
        get timings() { return this.#timings_accessor_storage; }
        set timings(value) { this.#timings_accessor_storage = value; }
        #narrow_accessor_storage = (__runInitializers(this, _timings_extraInitializers), __runInitializers(this, _narrow_initializers, false));
        /**
         * When set it renders mobile friendly view
         * @attribute
         */
        get narrow() { return this.#narrow_accessor_storage; }
        set narrow(value) { this.#narrow_accessor_storage = value; }
        #withRedirects_accessor_storage = (__runInitializers(this, _narrow_extraInitializers), __runInitializers(this, _withRedirects_initializers, false));
        get withRedirects() { return this.#withRedirects_accessor_storage; }
        set withRedirects(value) { this.#withRedirects_accessor_storage = value; }
        #viewData_accessor_storage = (__runInitializers(this, _withRedirects_extraInitializers), __runInitializers(this, _viewData_initializers, []));
        get viewData() { return this.#viewData_accessor_storage; }
        set viewData(value) { this.#viewData_accessor_storage = value; }
        #totalTime_accessor_storage = (__runInitializers(this, _viewData_extraInitializers), __runInitializers(this, _totalTime_initializers, 0));
        get totalTime() { return this.#totalTime_accessor_storage; }
        set totalTime(value) { this.#totalTime_accessor_storage = value; }
        willUpdate(cp) {
            super.updated(cp);
            if (cp.has('timings')) {
                this.processTimings();
            }
        }
        processTimings() {
            const { timings } = this;
            if (!timings) {
                this.viewData = [];
                this.withRedirects = false;
                this.totalTime = 0;
                return;
            }
            this.withRedirects = timings.length > 1;
            this.viewData = computeTimingsViewData(timings);
            this.totalTime = this.viewData.reduce((prev, current) => prev + current.duration, 0);
        }
        render() {
            const { viewData, withRedirects } = this;
            if (!Array.isArray(viewData) || !viewData.length) {
                return this.renderNoData();
            }
            if (withRedirects) {
                return this.renderRedirectsTable();
            }
            return this.renderTiming(viewData[0]);
        }
        renderNoData() {
            return html ` <div class="no-data">No data available.</div> `;
        }
        renderRedirectsTable() {
            const { totalTime, viewData } = this;
            const items = [...viewData];
            const last = items.pop();
            return html `
      <section class="redirects">
        <h3 class="sub-title">Redirects</h3>
        ${items.map((item, index) => this.renderRedirectItem(item, index))}
        <h3 class="sub-title">Final request</h3>
        <div class="timings-row">
          <div class="redirect-value">${this.renderTiming(last)}</div>
        </div>
        <div class="status-row">
          <div class="flex"></div>
          <span class="timing-value total text">Total: ${totalTime} ms</span>
        </div>
      </section>
    `;
        }
        renderRedirectItem(item, index) {
            return html `
      <div class="timings-row">
        <div class="status-label text">#<span>${index + 1}</span></div>
        <div class="redirect-value">${this.renderTiming(item)}</div>
      </div>
    `;
        }
        /**
         * @returns The template for a single timing item.
         */
        renderTiming(info) {
            const { data, duration } = info;
            const { blocked, connect, dns, receive, send, wait, ssl } = data;
            return html `
      ${this.renderTimingRow(duration, blocked)} ${this.renderTimingRow(duration, dns)}
      ${this.renderTimingRow(duration, connect)} ${this.renderTimingRow(duration, ssl)}
      ${this.renderTimingRow(duration, send)} ${this.renderTimingRow(duration, wait)}
      ${this.renderTimingRow(duration, receive)}
      <div class="row is-total">
        <span class="timing-value total">${info.duration} ms</span>
      </div>
    `;
        }
        /**
         * Renders a single timing row.
         * @param duration Max value of the progress
         * @param info The computed timing values.
         */
        renderTimingRow(duration, info) {
            if (!info || typeof info.label === 'undefined') {
                return '';
            }
            return html `
      <div class="row" data-type="${info.type}-time">
        <div class="timing-label label">${info.title}</div>
        <ui-progress
          aria-label="${info.ariaLabel}"
          .value="${info.previous}"
          .secondaryProgress="${info.value}"
          .max="${duration}"
          step="0.0001"
        ></ui-progress>
        <span class="timing-value">${info.label} ms</span>
      </div>
    `;
        }
        /**
         * Renders the start time row
         * @param time The timestamp of the request
         */
        renderStartTime(time) {
            if (typeof time !== 'number') {
                return '';
            }
            return html ` <div class="row" data-type="start-time">
      <span class="label">Start date:</span>
      <ui-date-time
        year="numeric"
        month="numeric"
        day="numeric"
        hour="numeric"
        minute="numeric"
        second="numeric"
        class="date-value"
        .date="${time}"
      ></ui-date-time>
    </div>`;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _totalTime_extraInitializers);
        }
    };
})();
export default LogTimings;
//# sourceMappingURL=LogTimings.js.map