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 { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
export class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    /*
     * The below method is e2e-test covered in
     * @see{module:vega-tab-group-with-button-click-normal}
     */
    /* istanbul ignore next */
    /**
     * If there is no pending animation, it calls the `setPageIndex` method of the `pageIndexController` object to update the current page index based on the direction of the button clicked
     *
     * @param {'left' | 'right'} direction left or right button
     */
    this.onDirectionButtonClick = (direction) => {
      this.pageIndexController.setPageIndex(direction === 'left' ? this.currentPageIndex - 1 : this.currentPageIndex + 1);
    };
  }
  /* istanbul ignore next */
  getDropdownRef() {
    return this.dropdownRef;
  }
  /*
   * The below method is e2e-test covered in
   * @see{module:vega-tab-group-with-left-button}
   * @see{module:vega-tab-group-with-right-button}
   */
  /* istanbul ignore next */
  render(direction) {
    const source = [];
    this.tabPages
      .slice(direction === 'left' ? 0 : this.currentPageIndex + 1, direction === 'left' ? this.currentPageIndex : this.tabPages.length)
      .flat()
      .map((tabItem) => {
      source.push({
        key: tabItem.dataTarget,
        label: tabItem.label,
        disabled: tabItem.disabled,
      });
    });
    const translocation = {
      X: 0,
      Y: 16,
    };
    const isHidden = direction === 'left'
      ? this.currentPageIndex === 0
      : this.currentPageIndex + 1 === this.tabPages.length || this.tabPages.length <= 1;
    const icon = direction === 'left' ? 'chevron-backward-rounded' : 'chevron-forward-rounded';
    const selectedItemKey = source.find((item) => item.key === this.selectedTabDataTarget)
      ? this.selectedTabDataTarget
      : '';
    return (h("div", { class: {
        'tab-left-button': direction === 'left',
        'tab-right-button': direction === 'right',
        'vega-hidden': isHidden,
      }, 
      /* eslint-disable-next-line react/jsx-no-bind */
      onClick: () => this.onDirectionButtonClick(direction), "aria-label": direction === 'left' ? 'Show previous tabs' : 'Show next tabs', role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
      h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: selectedItemKey, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
          this.dropdownRef = ref;
          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, (payload) => {
            this.vegaTabGroupSelectedTargetController.handleTabItemClick(payload.detail);
          });
        } },
        h("vega-icon", { size: "size-12", icon: icon }))));
  }
}
__decorate([
  MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "tabPages", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "currentPageIndex", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "selectedTabDataTarget", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "positionRelativeTo", void 0);
__decorate([
  MapToComponentField({ componentFieldName: 'vegaTabGroupPageIndexController' })
], VegaTabGroupSwitchPageButtonRenderer.prototype, "pageIndexController", void 0);
__decorate([
  MapToComponentField()
], VegaTabGroupSwitchPageButtonRenderer.prototype, "vegaTabGroupSelectedTargetController", void 0);
