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 { MelodicComponent } from '@melodicdev/core';
import { buttonGroupTemplate } from './button-group.template.js';
import { buttonGroupStyles } from './button-group.styles.js';
/**
 * ml-button-group - A group of connected toggle buttons
 *
 * @example Single selection:
 * ```html
 * <ml-button-group value="list">
 *   <ml-button-group-item value="list" icon="list">List</ml-button-group-item>
 *   <ml-button-group-item value="grid" icon="grid-four">Grid</ml-button-group-item>
 * </ml-button-group>
 * ```
 *
 * @example Multiple selection:
 * ```html
 * <ml-button-group multiple>
 *   <ml-button-group-item value="bold" icon="text-bolder"></ml-button-group-item>
 *   <ml-button-group-item value="italic" icon="text-italic"></ml-button-group-item>
 *   <ml-button-group-item value="underline" icon="text-underline"></ml-button-group-item>
 * </ml-button-group>
 * ```
 *
 * @fires ml:change - Emitted when selection changes. Detail: { value: string } or { values: string[] }
 */
let ButtonGroupComponent = class ButtonGroupComponent {
    constructor() {
        /** Currently selected value (single selection mode) */
        this.value = '';
        /** Active state style: 'outline' (gray) or 'solid' (primary color) */
        this.variant = 'outline';
        /** Size variant */
        this.size = 'md';
        /** Disable the entire group */
        this.disabled = false;
        /** Allow multiple selections */
        this.multiple = false;
        /** Selected values (multiple mode) */
        this.values = [];
        /** Handle slot changes to sync initial state */
        this.handleSlotChange = () => {
            this.syncItems();
        };
        this._handleItemClick = (event) => {
            event.stopPropagation();
            const itemValue = event.detail.value;
            if (this.multiple) {
                const idx = this.values.indexOf(itemValue);
                if (idx >= 0) {
                    this.values = this.values.filter((v) => v !== itemValue);
                }
                else {
                    this.values = [...this.values, itemValue];
                }
                this.syncItems();
                this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
                    bubbles: true,
                    composed: true,
                    detail: { values: this.values }
                }));
            }
            else {
                this.value = itemValue;
                this.syncItems();
                this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
                    bubbles: true,
                    composed: true,
                    detail: { value: this.value }
                }));
            }
        };
    }
    onCreate() {
        this.elementRef.addEventListener('ml:item-click', this._handleItemClick);
        this.syncItems();
    }
    onDestroy() {
        this.elementRef.removeEventListener('ml:item-click', this._handleItemClick);
    }
    syncItems() {
        const items = this.elementRef.querySelectorAll('ml-button-group-item');
        items.forEach((item) => {
            const itemValue = item.getAttribute('value') ?? '';
            const isActive = this.multiple ? this.values.includes(itemValue) : itemValue === this.value;
            item.toggleAttribute('active', isActive);
            item.toggleAttribute('group-disabled', this.disabled);
            item.setAttribute('group-size', this.size);
            item.setAttribute('group-variant', this.variant);
        });
    }
};
ButtonGroupComponent = __decorate([
    MelodicComponent({
        selector: 'ml-button-group',
        template: buttonGroupTemplate,
        styles: buttonGroupStyles,
        attributes: ['value', 'variant', 'size', 'disabled', 'multiple']
    })
], ButtonGroupComponent);
export { ButtonGroupComponent };
