import React, { useEffect, useState } from 'react';
import { PHXButton } from '../Button/Button';
import { classNames } from '../types';
export function PHXButtonGroup({ className, size, dataGroups, type, label }) {
    const [active, setActive] = useState('');
    const [current, setCurrent] = useState(false);
    const setIsActive = (item) => {
        item.onClick();
        if (type === 'active-button') {
            setActive(item.buttonText);
            if (item.buttonText === active) {
                setCurrent(false);
                setActive('');
            }
            else {
                setCurrent(true);
            }
        }
        else {
            return;
        }
    };
    useEffect(() => {
        for (const item of dataGroups) {
            if (item.defaultActive) {
                setActive(item.buttonText);
                setCurrent(true);
            }
        }
    }, [dataGroups]);
    return (React.createElement("div", null,
        label && React.createElement("label", { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
        React.createElement("div", { className: `flex w-fit justify-start gap-x-2 rounded-lg ${className}` }, dataGroups.map((item, index) => (React.createElement(PHXButton, { key: item.buttonText, className: classNames(index === 0 ? 'rounded-none rounded-tl-lg rounded-bl-lg border-l' : 'rounded-none', index === dataGroups.length - 1 ? 'rounded-none rounded-tr-lg rounded-br-lg' : 'rounded-none', type === 'active-button' && active === item.buttonText && current
                ? '!bg-gray-200 !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] !border-b-gray-300 hover:cursor-default'
                : '', '!ring-0 border-y border-r border-gray-300 leading-4'), secondary: true, size: size, onClick: () => {
                if (type === 'active-button' && active === item.buttonText && current) {
                    return;
                }
                setIsActive(item);
            } }, item.buttonText))))));
}
//# sourceMappingURL=ButtonGroup.js.map