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 { h } from '@stencil/core';
import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
import { getDeviceType } from '../../../../utils/ui';
import { DeviceType } from '../../../../types/ui.type';
import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
/* The `VegaInputRangeInputRenderer` class is a TypeScript React component used to render an input range with two fields for minimum and maximum values. */
export class VegaInputRangeInputRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-input-range-label-click}
     */
    /* istanbul ignore next */
    this.focusFirstInput = () => {
      void this.minFieldInputRef.doFocus();
    };
    /**
     * update the component value when the range input value change
     *
     * @param {NotifyObserverPayload<string>} payload the input value and the input element object
     */
    this.inputValueChange = (payload) => {
      const rangeIndex = payload.host.dataset.index === '0' ? 0 : 1;
      this.valueController.updateValueByRangeIndex(payload.detail, rangeIndex);
    };
  }
  /**
   * The function `getInputRefByIndex` returns the HTML input element reference based on the index provided.
   *
   * @param {RangeInputIndexType} index - The `index` parameter in the `getInputRefByIndex` function is
   * of type `RangeInputIndexType`. This type is used to specify whether the index refers to the minimum
   * or maximum input field in a range input element.
   * @returns {HTMLVegaInputElement} The `getInputRefByIndex` function returns either the `minFieldInputRef` or
   * `maxFieldInputRef` based on the `index` provided.
   */
  getInputRefByIndex(index) {
    return [this.minFieldInputRef, this.maxFieldInputRef][index];
  }
  /** The `render()` method in the `VegaInputRangeInputRenderer` class is responsible for rendering the JSX structure of the input range component. Here's a breakdown of what the `render()` method is doing: */
  render() {
    return (h("vega-box", { class: {
        'vega-input-range-input-container': true,
        'input-range-disabled': this.disabled,
        'input-range-mobile': this.isMobileDevice,
        'input-range-with-clear-icon': this.showClearIcon && !this.disabled,
      }, corners: "rounded-8", backgroundColor: this.disabled ? 'bg-secondary' : 'bg-primary' },
      h("vega-flex", { "align-items": "center", direction: this.isMobileDevice ? 'col' : 'row' },
        h("vega-input", Object.assign({ prefixIcon: this.prefixIcon }, this.getInputPropsByRangeIndex(0), { ref: (input) => {
            DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, VegaChange, this.inputValueChange);
            this.minFieldInputRef = input;
          } })),
        h("span", { class: "vega-input-range-divider" }),
        h("vega-input", Object.assign({ class: {
            'with-left-padding-in-mobile': !!this.prefixIcon && this.isMobileDevice,
          } }, this.getInputPropsByRangeIndex(1), { ref: (input) => {
            DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, VegaChange, this.inputValueChange);
            this.maxFieldInputRef = input;
          } }))),
      this.clearIconRenderer.render()));
  }
  /**
   * Get the input props object by range index
   *
   * @param {number} index the range index
   * @returns {InputPropsType} the input props object
   */
  getInputPropsByRangeIndex(index) {
    return {
      'type': 'number',
      'data-index': index,
      'placeholder': this.getPlaceholderByIndex(index),
      'data-aria-label': this.getDataAriaLabel(index),
      'showClearIcon': false,
      'disabled': this.disabled,
      'size': this.size,
      'min': this.min,
      'max': this.max,
      'value': this.getDefaultValueByIndex(index),
    };
  }
  /**
   * get the input placeholder text by the input range index
   *
   * @param {number} index the range index 0|1
   * @returns {string} the input placeholder text
   */
  getPlaceholderByIndex(index) {
    const placeholder = this.placeholder || VegaInputRangeInputRenderer.defaultPlaceholder;
    return this.translationSlimmer.t(placeholder[index]);
  }
  /**
   * Get the data aria label for the input range input by the input range index
   *
   * @param {number} index the range index 0|1
   * @returns {string} the data aria label for the input range input
   */
  // TODO: should guarantee all the a11y label is integrated with our translation api, https://gethired.atlassian.net/browse/VD-8327
  getDataAriaLabel(index) {
    const inputRangeLabel = this.label || 'Input range';
    return `${inputRangeLabel} ${index === 0 ? 'start' : 'end'}`;
  }
  /**
   * get the input value by the input range index
   *
   * @param {number} index 0|1
   * @returns {string} the input value
   */
  getDefaultValueByIndex(index) {
    const value = this.value || ['', ''];
    return value[index];
  }
}
VegaInputRangeInputRenderer.defaultPlaceholder = ['Minimum', 'Maximum'];
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "value", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "prefixIcon", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "disabled", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "min", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "max", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "size", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "placeholder", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "label", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "showClearIcon", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "valueController", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "clearIconRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaInputRangeInputRenderer.prototype, "translationSlimmer", void 0);
