import { html } from 'lit';
import { query, state, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { watch } from '../../internal/watch.mjs';
import styles from './button-group.styles.mjs';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
class FlowUiButtonGroup extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.disableRole = false;
    this.label = "";
    this.vertical = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.vertical = boolean(this.vertical, true);
  }
  async handleVerticalChange() {
    this.handleSlotChange();
  }
  handleFocus(event) {
    const button = findButton(event.target);
    button?.classList.add("flow-ui-button-group__button--focus");
  }
  handleBlur(event) {
    const button = findButton(event.target);
    button?.classList.remove("flow-ui-button-group__button--focus");
  }
  handleMouseOver(event) {
    const button = findButton(event.target);
    button?.classList.add("flow-ui-button-group__button--hover");
  }
  handleMouseOut(event) {
    const button = findButton(event.target);
    button?.classList.remove("flow-ui-button-group__button--hover");
  }
  handleSlotChange() {
    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
    slottedElements.forEach((el) => {
      const index = slottedElements.indexOf(el);
      const button = findButton(el);
      if (button !== null) {
        button.classList.add("flow-ui-button-group__button");
        button.classList.toggle("flow-ui-button-group__button--vertical", this.vertical);
        button.classList.toggle("flow-ui-button-group__button--first", index === 0);
        button.classList.toggle("flow-ui-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
        button.classList.toggle("flow-ui-button-group__button--last", index === slottedElements.length - 1);
        button.classList.toggle(
          "flow-ui-button-group__button--tool",
          button.tagName.toLowerCase() === "flow-ui-tool-button"
        );
      }
    });
  }
  render() {
    return html`
      <slot
        part="base"
        class=${classMap({
      "button-group": true,
      "button-group--vertical": this.vertical
    })}
        role="${this.disableRole ? "presentation" : "group"}"
        aria-label=${this.label}
        @focusout=${this.handleBlur}
        @focusin=${this.handleFocus}
        @mouseover=${this.handleMouseOver}
        @mouseout=${this.handleMouseOut}
        @slotchange=${this.handleSlotChange}
      ></slot>
    `;
  }
}
FlowUiButtonGroup.styles = styles;
__decorateClass([
  query("slot")
], FlowUiButtonGroup.prototype, "defaultSlot", 2);
__decorateClass([
  state()
], FlowUiButtonGroup.prototype, "disableRole", 2);
__decorateClass([
  property()
], FlowUiButtonGroup.prototype, "label", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], FlowUiButtonGroup.prototype, "vertical", 2);
__decorateClass([
  watch("vertical", { waitUntilFirstUpdate: true })
], FlowUiButtonGroup.prototype, "handleVerticalChange", 1);
function findButton(el) {
  const selector = "flow-ui-button, flow-ui-tool-button";
  return el.closest(selector) ?? el.querySelector(selector);
}

export { FlowUiButtonGroup as default };
