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 { Fragment, h } from '@stencil/core';
import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
import { getDeviceType } from '../../../../utils/ui';
import { DeviceType } from '../../../../types/ui.type';
import { isNonNullable } from '../../../../types/type-guard';
/** The `VegaTimePickerRangeDropdownRenderer` class is a TypeScript React component that renders a dropdown for selecting a range of time values. */
export class VegaTimePickerRangeDropdownRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
    this.isTabletDevice = getDeviceType() === DeviceType.TABLET;
    /** The `renderStartDropdown` method is a private method of the `VegaTimePickerRangeDropdownRenderer` class. It is responsible for rendering the start dropdown element in the component's JSX. */
    this.renderStartDropdown = () => {
      return (h("vega-time-picker-dropdown", { class: {
          'vega-time-picker-dropdown start-dropdown': true,
          /* istanbul ignore next */
          'mobile': this.isMobileDevice,
          'tablet': this.isTabletDevice,
        }, ref: (e) => (this.startDropdown = e) },
        h("div", { class: "vega-time-picker-dropdown-container", ref: (e) => (this.startDropdownContainer = e) },
          h("div", { class: "vega-time-picker-dropdown-panel" }, this.renderDropdownList('start')))));
    };
    /** The `renderEndDropdown` method is a private method of the `VegaTimePickerRangeDropdownRenderer` class. It is responsible for rendering the end dropdown element in the component's JSX. */
    this.renderEndDropdown = () => {
      return (h("vega-time-picker-dropdown", { class: {
          'vega-time-picker-dropdown end-dropdown': true,
          /* istanbul ignore next */
          'mobile': this.isMobileDevice,
          'tablet': this.isTabletDevice,
        }, ref: (e) => (this.endDropdown = e) },
        h("div", { class: "vega-time-picker-dropdown-container", ref: (e) => (this.endDropdownContainer = e) },
          h("div", { class: "vega-time-picker-dropdown-panel" }, this.renderDropdownList('end')))));
    };
    /** The `renderDropdownList` method is a private method of the `VegaTimePickerRangeDropdownRenderer` class. It is responsible for rendering the dropdown list of time values in the component's JSX. */
    this.renderDropdownList = (rangeIndex) => {
      const source = this.getTimeArray();
      return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
          'vega-time-picker-panel-column': true,
        } }, source.map((item, index) => {
        {
          return this.renderDropdownItem(item, rangeIndex, index);
        }
      })));
    };
  }
  /**
   * Component lifecycle - [componentDidRender]{@link VegaTimePicker.componentDidRender}
   */
  componentDidRenderCallback() {
    if (this.startDropdownContainer && this.startDropdownContainer.parentElement === this.startDropdown) {
      this.startDropdown.shadowRoot.append(this.startDropdownContainer);
    }
    if (this.endDropdownContainer && this.endDropdownContainer.parentElement === this.endDropdown) {
      this.endDropdown.shadowRoot.append(this.endDropdownContainer);
    }
  }
  /**
   * The function returns a reference to the startDropdown element.
   *
   * @returns {HTMLElement} the startDropdown element, which is of type HTMLElement.
   */
  getStartDropdownRef() {
    return this.startDropdown;
  }
  /**
   * The function returns a reference to the endDropdown element.
   *
   * @returns {HTMLElement} the startDropdown element, which is of type HTMLElement.
   */
  getEndDropdownRef() {
    return this.endDropdown;
  }
  /**
   * The function returns the selected elements. If elements is empty, it returns the first option by default.
   *
   * @returns {HTMLElement[]} returns an array of HTMLElements.
   */
  getSelectedItem() {
    const startDropdown = this.startDropdown.shadowRoot;
    const endDropdown = this.endDropdown.shadowRoot;
    let elements = [
      startDropdown.querySelector('.vega-dropdown-item-selected'),
      endDropdown.querySelector('.vega-dropdown-item-selected'),
    ].filter(isNonNullable);
    if (elements.length === 0) {
      elements = [
        startDropdown.querySelector('.vega-time-picker-dropdown-panel li:first-child'),
        endDropdown.querySelector('.vega-time-picker-dropdown-panel li:first-child'),
      ].filter(isNonNullable);
    }
    return elements;
  }
  render() {
    return (h(Fragment, null,
      this.renderStartDropdown(),
      this.renderEndDropdown()));
  }
  /*
   * The below method is e2e-test covered in
   * @see{module:vega-time-picker-range-dropdown-item-click}
   */
  /* istanbul ignore next */
  /** The `renderDropdownItem` method is responsible for rendering each item in the dropdown list of time values. It creates an `<li>` element with the following attributes and event handlers: */
  renderDropdownItem(item, rangeIndex, index) {
    return (h("li", { key: item, role: "menuitem", "aria-label": item, class: {
        'vega-dropdown-item-selected': this.isItemSelected(item, rangeIndex),
      }, tabIndex: index === 0 ? 0 : -1, "data-index": index, 
      /* eslint-disable-next-line react/jsx-no-bind */
      onClick: () => this.onItemClick(item, rangeIndex), onKeyDown: createEnterKeyHandlerToTriggerClick() },
      h("span", { "data-index": index, innerHTML: item })));
  }
  /*
   * The below method is e2e-test covered in
   * @see{module:vega-time-picker-range-dropdown-item-click}
   */
  /* istanbul ignore next */
  /**
   * It is called when a dropdown item is clicked.
   *
   * @param {string} item time string
   * @param {TimeRangeIndex} rangeIndex start or end
   */
  onItemClick(item, rangeIndex) {
    this.valueController.updateValueByRangeType(item, rangeIndex);
    if (rangeIndex === 'start') {
      this.startDropdownController.hide();
      void this.rangeInputRenderer.getEndInputRef().doFocus();
    }
    else {
      this.endDropdownController.hide();
    }
  }
  /**
   * It is used to determine if a dropdown item is currently selected or not.
   *
   * @param {string} item time string
   * @param {TimeRangeIndex} rangeIndex start or end
   * @returns {boolean} a boolean value
   */
  isItemSelected(item, rangeIndex) {
    /* istanbul ignore next */
    const valueArr = this.value && Array.isArray(this.value) ? this.value : ['', ''];
    if (rangeIndex === 'start' && valueArr[0] === item) {
      return true;
    }
    else if (rangeIndex === 'end' && valueArr[1] === item) {
      return true;
    }
    return false;
  }
  /**
   * The `getTimeArray` method is a private method of the `VegaTimePickerRangeDropdownRenderer` class.
   * It is responsible for generating an array of time values based on the `hours` and `minutes` provided in the `dropdownSource` property.
   *
   * @returns {string[]} all selectable time list
   */
  getTimeArray() {
    const result = [];
    const resultWithPM = [];
    const resultWithAM = [];
    const timeFormat = this.timeFormat;
    const { hours, minutes } = this.dropdownSource;
    if (this.dropdownSource) {
      for (let i = 0; i < hours.length; i++) {
        for (let j = 0; j < minutes.length; j++) {
          const item = `${hours[i]}:${minutes[j]}`;
          result.push(item);
          if (timeFormat === '12-hour') {
            resultWithAM.push(item + ' AM');
            resultWithPM.push(item + ' PM');
          }
        }
      }
    }
    if (timeFormat === '12-hour') {
      return resultWithAM.concat(resultWithPM);
    }
    return result;
  }
}
__decorate([
  MapToComponentField()
], VegaTimePickerRangeDropdownRenderer.prototype, "timeFormat", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeDropdownRenderer.prototype, "value", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeDropdownRenderer.prototype, "dropdownSource", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeDropdownRenderer.prototype, "valueController", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeDropdownRenderer.prototype, "rangeInputRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeDropdownRenderer.prototype, "startDropdownController", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerRangeDropdownRenderer.prototype, "endDropdownController", void 0);
__decorate([
  MapToComponentMethod('componentDidRender')
], VegaTimePickerRangeDropdownRenderer.prototype, "componentDidRenderCallback", null);
