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, Fragment } from '@stencil/core';
import { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
import { isTimeStr } from '../../../../utils/date';
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 { VegaBlur, VegaChange, VegaFocus } from '../../../../helpers/event-manager/event-id/vega-event-id';
/** The `VegaTimePickerRangeInputRenderer` class is a TypeScript React component that renders a range input for selecting start and end times. */
export class VegaTimePickerRangeInputRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
    this.onInputChange = (e) => {
      const target = e.host;
      if (target.parentElement.classList.contains('time-picker-input-start')) {
        this.valueController.updateValueByRangeType(e.detail, 'start');
      }
      else {
        this.valueController.updateValueByRangeType(e.detail, 'end');
      }
    };
    /*
     * The below method is e2e-test covered in
     * @see{module:vega-time-picker-range-input-focus}
     */
    /* istanbul ignore next */
    /**
     * an event handler that is triggered when the input field of the time picker component receives focus.
     *
     * @param {CustomEvent} e event object
     */
    this.timePickerInputFocus = (e) => {
      const target = e.host;
      const value = Array.isArray(this.value) ? this.value : ['', ''];
      if (target.parentElement.classList.contains('time-picker-input-start')) {
        this.startDropdownController.showAndScrollPosition(value[0]);
      }
      else {
        this.endDropdownController.showAndScrollPosition(value[1] ? value[1] : value[0]);
      }
    };
    /* istanbul ignore next */
    /**
     * an event handler that is triggered when the input field of the time picker component receives blur.
     *
     * @param {CustomEvent} e event object
     */
    this.timePickerInputBlur = (e) => {
      const target = e.host;
      const rangeIndex = target.parentElement.classList.contains('time-picker-input-start')
        ? 'start'
        : 'end';
      if (!isTimeStr(target.value, this.timeFormat)) {
        target.value = '';
        this.valueController.updateValueByRangeType('', rangeIndex);
      }
      else if (target.value && this.increments > 1) {
        const { hour, minute, amPm } = this.dropdownSelectedItemsController.getClosetTimeValue(target.value);
        target.value = `${hour}:${minute}${amPm ? ' ' + amPm : ''}`;
      }
    };
  }
  /**
   * The function returns a reference to the start time input element.
   *
   * @returns {HTMLVegaInputElement} The method is returning an HTMLVegaInputElement.
   */
  getStartInputRef() {
    return this.startTimeInputRef;
  }
  /**
   * The function returns a reference to the end time input element.
   *
   * @returns {HTMLVegaInputElement} The method is returning an HTMLVegaInputElement.
   */
  getEndInputRef() {
    return this.endTimeInputRef;
  }
  /* istanbul ignore next */
  render() {
    const startValue = Array.isArray(this.value) ? this.value[0] : '';
    const endValue = Array.isArray(this.value) ? this.value[1] : '';
    return (h(Fragment, null,
      h("vega-flex", { class: "v-w-full", gap: "0", "align-items": "center", direction: this.isMobileDevice ? 'col' : 'row' },
        h("div", { class: "time-picker-input time-picker-input-start vega-flex-basis-0 vega-flex-grow" },
          h("vega-input", { "prefix-icon": "clock-face", placeholder: this.getPlaceholderBySourceType('start'), disabled: this.disabled, readOnly: this.readOnly, size: this.size, value: startValue, ref: (ref) => {
              this.handlerEvent(ref);
              return (this.startTimeInputRef = ref);
            }, "show-clear-icon": "false" })),
        h("span", { class: "range-input-divider v-min-w-min vega-flex-shrink-0" }),
        h("div", { class: "time-picker-input time-picker-input-end vega-flex-basis-0 vega-flex-grow" },
          h("vega-input", { placeholder: this.getPlaceholderBySourceType('end'), disabled: this.disabled, readOnly: this.readOnly, size: this.size, value: endValue, ref: (ref) => {
              this.handlerEvent(ref);
              return (this.endTimeInputRef = ref);
            }, "show-clear-icon": "false" }))),
      this.rangeClearButtonRenderer.render()));
  }
  handlerEvent(ref) {
    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, (input) => {
      this.timePickerInputBlur(input);
    });
    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
      this.onInputChange(input);
    });
    DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, (input) => {
      this.timePickerInputFocus(input);
    });
  }
  /**
   * get input placeholder by input source type
   *
   * @param {TimeRangeIndex} rangeIndex start or end input
   * @returns {string} a string value
   */
  getPlaceholderBySourceType(rangeIndex) {
    if (rangeIndex === 'start') {
      return Array.isArray(this.placeholder) && this.placeholder[0]
        ? this.placeholder[0]
        : this.translationSlimmer.t('Start Time');
    }
    else {
      return Array.isArray(this.placeholder) && this.placeholder[1]
        ? this.placeholder[1]
        : this.translationSlimmer.t('End Time');
    }
  }
}
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "mode", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "placeholder", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "disabled", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "size", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "positionRelativeTo", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "timeFormat", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "increments", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "value", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "startDropdownController", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "endDropdownController", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "valueController", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "rangeClearButtonRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "rangeDropdownRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "dropdownSelectedItemsController", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "translationSlimmer", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeInputRenderer.prototype, "readOnly", void 0);
