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;
};
var IgcButtonGroupComponent_1;
import { LitElement, html } from 'lit';
import { property, queryAssignedElements } from 'lit/decorators.js';
import { themes } from '../../theming/theming-decorator.js';
import { createMutationController, } from '../common/controllers/mutation-observer.js';
import { watch } from '../common/decorators/watch.js';
import { registerComponent } from '../common/definitions/register.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { findElementFromEventPath, last } from '../common/util.js';
import { styles } from './themes/group.base.css.js';
import { all } from './themes/group.js';
import { styles as shared } from './themes/shared/group/group.common.css.js';
import IgcToggleButtonComponent from './toggle-button.js';
let IgcButtonGroupComponent = IgcButtonGroupComponent_1 = class IgcButtonGroupComponent extends EventEmitterMixin(LitElement) {
    static register() {
        registerComponent(IgcButtonGroupComponent_1, IgcToggleButtonComponent);
    }
    get isMultiple() {
        return this.selection === 'multiple';
    }
    _observerCallback({ changes: { added, attributes }, }) {
        if (this.isMultiple || this._selectedButtons.length <= 1) {
            return;
        }
        const buttons = this.toggleButtons;
        const idx = buttons.indexOf(added.length ? last(added).node : last(attributes));
        for (const [i, button] of buttons.entries()) {
            if (button.selected && i !== idx) {
                button.selected = false;
            }
        }
    }
    get _selectedButtons() {
        return this.toggleButtons.filter((b) => b.selected);
    }
    get selectedItems() {
        return this._selectedButtons.map((b) => b.value).filter((v) => v);
    }
    set selectedItems(values) {
        this._selectedItems = new Set(Array.isArray(values) ? values : []);
        this.setSelection(this._selectedItems);
    }
    updateDisabledState() {
        this.toggleButtons.forEach((b) => {
            b.disabled = this.disabled;
        });
    }
    updateSelectionState() {
        if (this._selectedButtons.length) {
            this.toggleButtons.forEach((b) => {
                b.selected = false;
            });
        }
    }
    constructor() {
        super();
        this._selectedItems = new Set();
        this.disabled = false;
        this.alignment = 'horizontal';
        this.selection = 'single';
        createMutationController(this, {
            callback: this._observerCallback,
            filter: [IgcToggleButtonComponent.tagName],
            config: {
                attributeFilter: ['selected'],
                childList: true,
                subtree: true,
            },
        });
    }
    firstUpdated() {
        if (this.disabled) {
            this.updateDisabledState();
        }
        const buttons = this._selectedButtons;
        if (buttons.length) {
            if (!this.isMultiple) {
                const index = buttons.indexOf(buttons.at(-1));
                for (let i = 0; i < index; i++) {
                    buttons[i].selected = false;
                }
            }
        }
        else {
            this.setSelection(this._selectedItems);
        }
    }
    handleClick(event) {
        const button = findElementFromEventPath(IgcToggleButtonComponent.tagName, event);
        if (button) {
            this.isMultiple
                ? this.handleMultipleSelection(button)
                : this.handleSingleSelection(button);
        }
    }
    handleSingleSelection(button) {
        const singleRequired = this.selection === 'single-required';
        const selectedButton = this._selectedButtons.at(0);
        const isSame = selectedButton && selectedButton.value === button.value;
        if (selectedButton) {
            if (singleRequired && isSame)
                return;
            this.emitDeselectEvent(selectedButton);
        }
        if (isSame)
            return;
        this.emitSelectEvent(button);
    }
    handleMultipleSelection(button) {
        button.selected
            ? this.emitDeselectEvent(button)
            : this.emitSelectEvent(button);
    }
    emitSelectEvent(button) {
        button.selected = true;
        this.emitEvent('igcSelect', { detail: button.value });
    }
    emitDeselectEvent(button) {
        button.selected = false;
        this.emitEvent('igcDeselect', { detail: button.value });
    }
    setSelection(values) {
        if (!values.size) {
            this.toggleButtons.forEach((b) => {
                b.selected = false;
            });
            return;
        }
        for (const button of this.toggleButtons) {
            if (values.has(button.value)) {
                button.selected = true;
                if (!this.isMultiple) {
                    break;
                }
            }
        }
    }
    render() {
        return html `
      <div
        part="group"
        role="group"
        aria-disabled=${this.disabled}
        @click=${this.handleClick}
      >
        <slot></slot>
      </div>
    `;
    }
};
IgcButtonGroupComponent.tagName = 'igc-button-group';
IgcButtonGroupComponent.styles = [styles, shared];
__decorate([
    queryAssignedElements({ selector: IgcToggleButtonComponent.tagName })
], IgcButtonGroupComponent.prototype, "toggleButtons", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], IgcButtonGroupComponent.prototype, "disabled", void 0);
__decorate([
    property({ reflect: true })
], IgcButtonGroupComponent.prototype, "alignment", void 0);
__decorate([
    property({ reflect: false })
], IgcButtonGroupComponent.prototype, "selection", void 0);
__decorate([
    property({ attribute: 'selected-items', type: Array, reflect: false })
], IgcButtonGroupComponent.prototype, "selectedItems", null);
__decorate([
    watch('disabled', { waitUntilFirstUpdate: true })
], IgcButtonGroupComponent.prototype, "updateDisabledState", null);
__decorate([
    watch('selection', { waitUntilFirstUpdate: true })
], IgcButtonGroupComponent.prototype, "updateSelectionState", null);
IgcButtonGroupComponent = IgcButtonGroupComponent_1 = __decorate([
    themes(all)
], IgcButtonGroupComponent);
export default IgcButtonGroupComponent;
//# sourceMappingURL=button-group.js.map