/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { Component, Host, Prop, h } from '@stencil/core';
import { config } from '../../global/config';
import { clamp } from '../../utils/helpers';
import { createColorClasses } from '../../utils/theme';
/**
 * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
 * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
 * @part track - The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the
 * width of the `buffer` value.
 */
export class GascoProgress {
  constructor() {
    /**
     * The state of the progress bar, based on if the time the process takes is known or not.
     * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
     */
    this.type = 'determinate';
    /**
     * If true, reverse the progress bar direction.
     */
    this.reversed = false;
    /**
     * If true, reverse the progress bar direction.
     */
    this.shape = 'inline';
    /**
     * The value determines how much of the active bar should display when the
     * `type` is `"determinate"`.
     * The value should be between [0, 1].
     */
    this.value = 0;
    /**
     * If the buffer and value are smaller than 1, the buffer circles will show.
     * The buffer should be between [0, 1].
     */
    this.buffer = 1;
    /**
     * The color to use from your application's color palette.
     * Default options are: `"primary"`, `"secondary"`, `"success"`, `"warning"` and `"danger"``.
     */
    this.color = 'primary';
  }
  render() {
    const finalSize = this.size === undefined && false ? 'small' : this.size;
    const { color, type, reversed, value, buffer, shape } = this;
    const paused = config.getBoolean('_testing');
    return (h(Host, { role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
        'progress-paused': paused,
        [`progress-bar-${type}`]: true,
        [`progress-${shape}`]: true,
        [`progress-${finalSize}`]: finalSize !== undefined,
        'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
      }) }, shape === 'inline' ? (type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)) : (type === 'indeterminate' ? renderIndeterminateCircle() : renderProgressCircle(value))));
  }
  static get is() { return "gasco-progress"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-progress.md.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-progress.md.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'determinate' | 'indeterminate'",
        "resolved": "\"determinate\" | \"indeterminate\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The state of the progress bar, based on if the time the process takes is known or not.\nDefault options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right)."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'determinate'"
    },
    "reversed": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If true, reverse the progress bar direction."
      },
      "attribute": "reversed",
      "reflect": false,
      "defaultValue": "false"
    },
    "shape": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'inline' | 'circle'",
        "resolved": "\"circle\" | \"inline\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If true, reverse the progress bar direction."
      },
      "attribute": "shape",
      "reflect": false,
      "defaultValue": "'inline'"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'small' | 'default' | 'large'",
        "resolved": "\"default\" | \"large\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The Progress size only for circle."
      },
      "attribute": "size",
      "reflect": true
    },
    "value": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1]."
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "0"
    },
    "buffer": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1]."
      },
      "attribute": "buffer",
      "reflect": false,
      "defaultValue": "1"
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Color",
        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never>",
        "references": {
          "Color": {
            "location": "import",
            "path": "../../interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"success\"`, `\"warning\"` and `\"danger\"``."
      },
      "attribute": "color",
      "reflect": true,
      "defaultValue": "'primary'"
    }
  }; }
}
const renderIndeterminateCircle = () => (h("div", { class: "gasco-progress-circle-infinite" },
  h("div", { class: "gasco-circle-infinite" })));
const renderProgressCircle = (value) => {
  const finalValue = clamp(0, value, 1);
  return (h("div", { class: "gasco-progress-circle", "data-progress": Math.ceil(finalValue * 100) },
    h("div", { class: "gasco-circle" },
      h("div", { class: "full gasco-progress-circle__slice" },
        h("div", { class: "gasco-progress-circle__fill" })),
      h("div", { class: "gasco-progress-circle__slice" },
        h("div", { class: "gasco-progress-circle__fill" }),
        h("div", { class: "gasco-progress-circle__fill gasco-progress-circle__bar" }))),
    h("div", { class: "gasco-progress-circle__overlay" })));
};
const renderIndeterminate = () => (h("div", { part: "track", class: "progress-buffer-bar" },
  h("div", { class: "indeterminate-bar-primary" },
    h("span", { part: "progress", class: "progress-indeterminate" })),
  h("div", { class: "indeterminate-bar-secondary" },
    h("span", { part: "progress", class: "progress-indeterminate" }))));
const renderProgress = (value, buffer) => {
  const finalValue = clamp(0, value, 1);
  const finalBuffer = clamp(0, buffer, 1);
  return [
    h("div", { part: "progress", class: "progress", style: { transform: `scaleX(${finalValue})` } }),
    /**
     * Buffer circles with two container to move
     * the circles behind the buffer progress
     * with respecting the animation.
     * When finalBuffer === 1, we use display: none
     * instead of removing the element to avoid flickering.
     */
    h("div", { class: { 'buffer-circles-container': true, 'gasco-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } },
      h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } },
        h("div", { part: "stream", class: "buffer-circles" }))),
    h("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
  ];
};
