var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, Host, h, Prop, Element, State } from '@stencil/core';
import { sanitizeVegaComponent } from '../../utils/component';
import { arrayToClassString } from '../../utils/ui';
import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
import { getCurrentBreakpoint } from '../../utils/breakpoints';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { VegaLoadingIndicatorRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-loading-indicator/runtime-metrics-payload-definition';
/**
 * @vegaVersion 1.16.0
 */
export class VegaLoadingIndicator {
  constructor() {
    this.globalSlimmers = {};
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-loading-indicator-resize-e2e}
     */
    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaLoadingIndicatorRuntimeMetricsPayloadDefinition);
    this.currentBreakpoint = getCurrentBreakpoint();
    /**
     * Specifies the shape of the loading indicator.
     *
     * @vegaVersion 1.16.0
     */
    this.shape = 'circle';
    /**
     * Specifies the size of the loading indicator.
     *    It is provided as a ResponsiveType.
     *
     * @vegaVersion 1.16.0
     */
    this.size = 'default';
    /**
     * Specifies the mode of the loading indicator.
     *
     * When the mode is set to `determinate`, there will be no animation.
     *
     * @vegaVersion 1.16.0
     */
    this.mode = 'indeterminate';
    /**
     * Specifies the completion percentage when
     *    the mode is set to `determinate`.
     *
     * @vegaVersion 1.16.0
     */
    this.percent = 0;
    /**
     * Provides a descriptive text or message that indicates
     *    the status or progress of the process.
     *
     * @vegaVersion 1.16.0
     */
    this.label = '';
    /**
     * Provides a supplementary prompt message that assists users in
     *    understanding the ongoing loading process.
     *
     * @vegaVersion 1.16.0
     */
    this.hint = '';
    /**
     * Indicates the current status or state of the loading process.
     *
     * @vegaVersion 1.16.0
     */
    this.status = 'default';
    this.renderCircleLoader = () => {
      const r = this.getCircleLoaderRadius(this.getResponsiveSize());
      const percent = this.mode === 'indeterminate' ? 0.75 : this.percent / 100;
      const perimeter = Math.PI * 2 * r;
      const progress = this.status === 'error' ? perimeter : perimeter * percent;
      return (h("svg", { class: "circle-loader" },
        h("circle", { r: r, class: "circle-loader-track", part: "circle-loader-track" }),
        h("circle", { r: r, class: "circle-loader-progress", part: "circle-loader-progress", "stroke-linecap": this.mode === 'indeterminate' ? 'round' : 'butt', "stroke-dasharray": [progress, perimeter].join(' ') }),
        this.mode === 'determinate' && (h("circle", { r: r, class: arrayToClassString(['circle-loader-progress-pointer', percent === 0 && 'v-hidden'].filter(Boolean)), "stroke-dashoffset": -progress, "stroke-dasharray": [0, perimeter].join(' ') }))));
    };
    this.renderBarLoader = () => {
      let progress = 75;
      if (this.mode === 'determinate') {
        if (this.status === 'error') {
          progress = 100;
        }
        else {
          progress = this.percent;
        }
      }
      return (h("div", { class: "bar-loader-track" },
        h("div", { class: arrayToClassString(['bar-loader', this.getResponsiveSize()]), style: { width: `${progress}%` } })));
    };
    this.renderLabelAndHint = () => {
      if (!this.label && !this.hint)
        return;
      return (h("vega-flex", { direction: "col", gap: "size-4", alignItems: "center" },
        this.label && h("span", { class: "vega-loading-indicator-label" }, this.label),
        this.hint && h("span", { class: "vega-loading-indicator-hint" }, this.hint)));
    };
    this.getResponsiveSize = () => {
      return ResponsiveFormatFacade.formatCustom(this.size);
    };
    /**
     * Radius = Inner Diameter + ((Outer Diameter - Inner Diameter) / 2)
     * @param {number} size The size of loading indicator
     */
    this.getCircleLoaderRadius = (size) => {
      switch (size) {
        case 'micro':
          return 6.5;
        case 'small':
          return 10;
        case 'large':
          return 52;
        default:
          return 20;
      }
    };
  }
  render() {
    const classNames = arrayToClassString([this.getResponsiveSize(), this.mode, `status-${this.status}`, this.shape].map((item) => `vega-loading-indicator-${item}`));
    return sanitizeVegaComponent(h(Host, { class: classNames },
      h("vega-flex", { direction: "col", gap: "size-16", alignItems: "center" },
        this.shape === 'circle' ? this.renderCircleLoader() : this.renderBarLoader(),
        this.renderLabelAndHint())), this.host);
  }
  static get is() { return "vega-loading-indicator"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-loading-indicator.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-loading-indicator.css"]
  }; }
  static get properties() { return {
    "shape": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'circle' | 'bar'",
        "resolved": "\"bar\" | \"circle\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.16.0"
          }],
        "text": "Specifies the shape of the loading indicator."
      },
      "attribute": "shape",
      "reflect": false,
      "defaultValue": "'circle'"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<VegaLoadingIndicatorSize>",
        "resolved": "\"default\" | \"large\" | \"micro\" | \"small\" | { S?: VegaLoadingIndicatorSize; M?: VegaLoadingIndicatorSize; L?: VegaLoadingIndicatorSize; XL?: VegaLoadingIndicatorSize; default?: VegaLoadingIndicatorSize; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "VegaLoadingIndicatorSize": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.16.0"
          }],
        "text": "Specifies the size of the loading indicator.\n   It is provided as a ResponsiveType."
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'default'"
    },
    "mode": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'indeterminate' | 'determinate'",
        "resolved": "\"determinate\" | \"indeterminate\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.16.0"
          }],
        "text": "Specifies the mode of the loading indicator.\n\nWhen the mode is set to `determinate`, there will be no animation."
      },
      "attribute": "mode",
      "reflect": false,
      "defaultValue": "'indeterminate'"
    },
    "percent": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.16.0"
          }],
        "text": "Specifies the completion percentage when\n   the mode is set to `determinate`."
      },
      "attribute": "percent",
      "reflect": false,
      "defaultValue": "0"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.16.0"
          }],
        "text": "Provides a descriptive text or message that indicates\n   the status or progress of the process."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "hint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.16.0"
          }],
        "text": "Provides a supplementary prompt message that assists users in\n   understanding the ongoing loading process."
      },
      "attribute": "hint",
      "reflect": false,
      "defaultValue": "''"
    },
    "status": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'default' | 'success' | 'error'",
        "resolved": "\"default\" | \"error\" | \"success\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.16.0"
          }],
        "text": "Indicates the current status or state of the loading process."
      },
      "attribute": "status",
      "reflect": false,
      "defaultValue": "'default'"
    }
  }; }
  static get states() { return {
    "currentBreakpoint": {}
  }; }
  static get elementRef() { return "host"; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaLoadingIndicator.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaLoadingIndicator.prototype, "pageResizeObserverSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaLoadingIndicator.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
