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 { getDeviceType } from '../../../../utils/ui';
import { DeviceType } from '../../../../types/ui.type';
import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
/** The `VegaTimePickerDropdownRenderer` class is a TypeScript React component that renders a dropdown menu for selecting a time value. */
export class VegaTimePickerSingleDropdownRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
    this.isTabletDevice = getDeviceType() === DeviceType.TABLET;
    this.renderDropdownByTimeSource = () => {
      return (h(Fragment, null,
        this.renderDropdownColumn(this.dropdownSource.hours, 'hour'),
        this.renderDropdownColumn(this.dropdownSource.minutes, 'minute'),
        this.timeFormat === '12-hour' && this.renderDropdownColumn(['AM', 'PM'], 'amPm')));
    };
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-time-picker-click-label-focus-input-e2e}
     */
    /* istanbul ignore next */
    this.onItemClick = (itemValue, sourceType) => {
      this.dropdownSelectedItemsController.setSelectedItems(Object.assign(Object.assign({}, this.selectedTimeValue), { [sourceType]: itemValue }));
    };
    this.onNowButtonClick = () => {
      this.dropdownSelectedItemsController.setSelectedItemsToCurrentTime();
      this.singleDropdownController.hide();
    };
    this.onApplyButtonClick = () => {
      this.valueController.updateValueBySelectedItems();
      this.singleDropdownController.hide();
    };
  }
  /**
   * Component lifecycle - [componentDidRender]{@link VegaTimePicker.componentDidRender}
   */
  componentDidRenderCallback() {
    if (this.dropdownContainer && this.dropdownContainer.parentElement === this.dropdown) {
      this.dropdown.shadowRoot.append(this.dropdownContainer);
    }
  }
  /**
   * The function returns a reference to the dropdown element.
   *
   * @returns {HTMLElement} an HTMLElement, specifically the dropdown element.
   */
  getDropdownRef() {
    return this.dropdown;
  }
  /**
   * The function returns the selected elements. If elements is empty, it returns the first option by default.
   *
   * @returns {HTMLElement[]} an array of HTMLElements.
   */
  getSelectedItem() {
    const elements = [];
    const dropdown = this.dropdown.shadowRoot;
    dropdown.querySelectorAll('.vega-dropdown-item-selected').forEach((selectedItem) => {
      elements.push(selectedItem);
    });
    if (elements.length === 0) {
      dropdown
        .querySelectorAll('.vega-time-picker-dropdown-panel li:first-child')
        .forEach((selectedItem) => {
        elements.push(selectedItem);
      });
    }
    return elements;
  }
  render() {
    return (h("vega-time-picker-dropdown", { class: {
        'vega-time-picker-dropdown': true,
        /* istanbul ignore next */
        'mobile': this.isMobileDevice,
        'tablet': this.isTabletDevice,
      }, ref: (e) => (this.dropdown = e) },
      h("div", { class: "vega-time-picker-dropdown-container", ref: (e) => (this.dropdownContainer = e) },
        h("div", { class: "vega-time-picker-dropdown-panel" }, this.renderDropdownByTimeSource()),
        h("div", { class: "horizontal-divider v-my-size-12" }),
        this.renderDropdownFoot())));
  }
  renderDropdownColumn(items, sourceType) {
    return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
        'vega-time-picker-panel-column': true,
      } }, items.map((item, index) => {
      {
        return this.renderDropdownItem(item, sourceType, index);
      }
    })));
  }
  /**
   * The below method is e2e-test covered in
   * @see{module:vega-time-picker-select-time-e2e}
   */
  /* istanbul ignore next */
  renderDropdownItem(item, sourceType, index) {
    return (h("li", { key: item, role: "menuitem", "aria-label": item, class: {
        'vega-dropdown-item-selected': this.isItemSelected(item, sourceType),
      }, tabIndex: index === 0 ? 0 : -1, "data-index": index, 
      /* eslint-disable-next-line react/jsx-no-bind */
      onClick: () => this.onItemClick(item, sourceType), onKeyDown: createEnterKeyHandlerToTriggerClick() },
      h("span", { "data-index": index, innerHTML: item })));
  }
  renderDropdownFoot() {
    return (h("div", { class: "vega-time-picker-dropdown-footer" },
      h("div", { class: "vega-time-picker-now" },
        h("vega-button-link", { size: "small", label: "Now", ref: (ref) => {
            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
              this.onNowButtonClick();
            });
          } })),
      h("div", null,
        h("vega-button-link", { size: "small", label: "Apply", ref: (ref) => {
            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
              this.onApplyButtonClick();
            });
          } }))));
  }
  /* If no hour, minute, etc. are currently selected,
   * the initial value is displayed. Hour and minute initial value is 00, amPm is AM.
   */
  isItemSelected(itemValue, sourceType) {
    return this.selectedTimeValue[`${sourceType}`] === itemValue;
  }
}
__decorate([
  MapToComponentField()
], VegaTimePickerSingleDropdownRenderer.prototype, "timeFormat", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerSingleDropdownRenderer.prototype, "dropdownSource", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerSingleDropdownRenderer.prototype, "selectedTimeValue", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerSingleDropdownRenderer.prototype, "valueController", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerSingleDropdownRenderer.prototype, "dropdownSelectedItemsController", void 0);
__decorate([
  MapToComponentField()
], VegaTimePickerSingleDropdownRenderer.prototype, "singleDropdownController", void 0);
__decorate([
  MapToComponentMethod('componentDidRender')
], VegaTimePickerSingleDropdownRenderer.prototype, "componentDidRenderCallback", null);
