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 { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaClick, VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
import changeManager from '../../../../../helpers/change-manager/change-manager';
import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
import { VegaInternalButtonGroupClick } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
import { findParent } from '../../../../../utils/ui';
/** The `VegaButtonGroupItemRenderer` class is a TypeScript React component used to render button group items with optional dropdown functionality. */
export class VegaButtonGroupItemRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    /**
     * Handle the button item click event
     */
    this.buttonItemClickHandle = () => {
      this.notifyParentGroup(this.itemKey);
    };
    /**
     * Handle the more button dropdown item click event
     */
    this.moreDropdownItemClickHandle = (payload) => {
      this.notifyParentGroup(payload.detail);
    };
    /**
     * Determines whether the button group item is disabled.
     *
     * The button group item is considered disabled if either:
     * - the item itself is disabled, or
     * - the parent is disabled (which forces all children to be disabled,
     *   regardless of their individual disabled state).
     */
    this.isDisabled = () => {
      return this.disabled || this.parentDisabled;
    };
  }
  /**
   * This function conditionally renders a Vega dropdown component with specified props and a click event handler if there is dropdown source data available, otherwise it renders a button item.
   *
   * @returns {HTMLElement} An HTMLElement is being returned. If the `dropdownSource` exists and has a length greater
   * than 0, a `<vega-dropdown>` element is returned with specified attributes and a reference to a node
   * with an observer attached. If `dropdownSource` does not exist or has a length of 0, the result of
   * `renderButtonItem()` is returned.
   */
  render() {
    var _a, _b, _c;
    if (this.dropdownSource && this.dropdownSource.length) {
      const dropdownProps = Object.assign(Object.assign({}, this.dropdownProps), { trigger: this.isDisabled() ? 'none' : (_b = (_a = this.dropdownProps) === null || _a === void 0 ? void 0 : _a.trigger) !== null && _b !== void 0 ? _b : 'click' });
      if (this.isDisabled() && ((_c = this.dropdownProps) === null || _c === void 0 ? void 0 : _c.trigger)) {
        this.dropdownProps.trigger = 'none';
      }
      return (h("vega-dropdown", Object.assign({ source: this.dropdownSource }, dropdownProps, { ref: (node) => {
          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, this.moreDropdownItemClickHandle);
        } }), this.renderButtonItemWithTooltip()));
    }
    else {
      return this.renderButtonItemWithTooltip();
    }
  }
  /**
   * The function `renderButtonItemWithTooltip` conditionally renders a button item with a tooltip based on the presence of label and iconOnly properties.
   *
   * @returns {HTMLElement} render the button item or button item with a tooltip
   */
  renderButtonItemWithTooltip() {
    if (this.iconOnly && this.label) {
      return (h("vega-tooltip", { placement: "top", text: this.label }, this.renderButtonItem()));
    }
    else {
      return this.renderButtonItem();
    }
  }
  /**
   * The function `renderButtonItem` in TypeScript React conditionally renders a button component based on the variant type.
   *
   * @returns {HTMLElement} The `renderButtonItem` method returns an HTMLElement, which is either a
   * `<vega-button-link>` element if the variant is 'tertiary', or a `<vega-button>` element with
   * specific class and variant attributes if the variant is not 'tertiary'.
   */
  renderButtonItem() {
    const buttonProps = this.getButtonProps();
    const allDisabledClass = this.parentDisabled || this.allItemsDisabled ? ' button-group-all-disabled' : '';
    if (this.variant === 'tertiary') {
      return (h("vega-button-link", Object.assign({ class: `button-group-item-button-${this.variant}${allDisabledClass}` }, buttonProps)));
    }
    else {
      return (h("vega-button", Object.assign({ class: `button-group-item-button-${this.variant}${allDisabledClass}`, variant: this.variant }, buttonProps)));
    }
  }
  /**
   * The function `notifyParentGroup` notifies the parent group component with a specific detail.
   *
   * @param {string} detail - The `detail` parameter in the `notifyParentGroup` function is a string
   * that contains additional information or details that will be passed along when notifying the parent
   * group. It is used to provide context or specific data related to the event or action that triggered
   * the notification.
   */
  notifyParentGroup(detail) {
    const itemGroup = findParent(this.host, 'vega-button-group');
    if (itemGroup) {
      changeManager.notify(domNodeSubjectFactory.getSubject(itemGroup, VegaInternalButtonGroupClick), {
        host: this.host,
        detail,
      });
    }
  }
  /**
   * The function `getButtonProps` returns an object with properties related to a button component.
   *
   * @returns An object with properties `size`, `icon`, `label`, and `iconAlign` is being returned.
   */
  getButtonProps() {
    return {
      size: this.size,
      icon: this.icon,
      label: this.iconOnly ? '' : this.getDefaultLabel(),
      iconAlign: this.iconAlign,
      disabled: this.isDisabled(),
      // eslint-disable-next-line jsdoc/require-jsdoc
      ref: (node) => {
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, this.buttonItemClickHandle);
      },
    };
  }
  /**
   * If the item is a more action item and the props label/icon are both empty, return a default label
   *
   * @returns {string} label string
   */
  getDefaultLabel() {
    return !this.icon && !this.label && this.dropdownSource && this.dropdownSource.length
      ? 'More'
      : this.label;
  }
}
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "size", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "icon", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "label", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "iconAlign", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "disabled", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "parentDisabled", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "allItemsDisabled", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "iconOnly", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "variant", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "itemKey", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "dropdownSource", void 0);
__decorate([
  MapToComponentField()
], VegaButtonGroupItemRenderer.prototype, "dropdownProps", void 0);
