import { h } from "@stencil/core";
export const ZButtonGroup = ({ id, options, value, onChange, size = 'medium', fullWidth = false, variant = 'primary', }) => {
    let sizeClass = 'z-button-group-medium';
    if (size === 'small') {
        sizeClass = 'z-button-group-small';
    }
    if (size === 'large') {
        sizeClass = 'z-button-group-large';
    }
    const handleButtonClick = (optionValue, disabled) => {
        if (!disabled && onChange) {
            onChange(optionValue);
        }
    };
    return (h("div", { id: id, class: `z-button-group ${variant === 'tab' ? 'z-button-group-tab z-button-group-tab-overlay' : ''} ${sizeClass} ${fullWidth ? 'w-full' : ''}` }, options.map((option, index) => {
        const isSelected = value === option.value;
        const isDisabled = option.disabled || false;
        const isFirst = index === 0;
        const isLast = index === options.length - 1;
        let buttonClass = 'z-button-group-item';
        if (variant === 'tab') {
            buttonClass += ' z-button-group-item-tab';
            if (isSelected) {
                buttonClass += ' z-button-group-item-tab-selected';
            }
            else {
                buttonClass += ' z-button-group-item-tab-unselected';
            }
        }
        else {
            if (isFirst) {
                buttonClass += ' z-button-group-item-first';
            }
            if (isLast) {
                buttonClass += ' z-button-group-item-last';
            }
            if (!isFirst && !isLast) {
                buttonClass += ' z-button-group-item-middle';
            }
            if (variant === 'primary') {
                if (isSelected) {
                    buttonClass += ' z-button-group-item-primary-selected';
                }
                else {
                    buttonClass += ' z-button-group-item-primary-unselected';
                }
            }
            else {
                if (isSelected) {
                    buttonClass += ' z-button-group-item-outlined-selected';
                }
                else {
                    buttonClass += ' z-button-group-item-outlined-unselected';
                }
            }
        }
        if (isDisabled) {
            buttonClass += ' z-button-group-item-disabled';
        }
        buttonClass += ` ${sizeClass}`;
        return (h("button", { key: option.value, type: "button", class: buttonClass, disabled: isDisabled, onClick: () => handleButtonClick(option.value, isDisabled) }, option.label));
    })));
};
