import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';

const IconRadioGroup = ({ items, onButtonClick, selectedValue: initialSelectedValue = null, onChange, className = '', }) => {
    const [selectedValue, setSelectedValue] = useState(initialSelectedValue);
    useEffect(() => {
        if (initialSelectedValue !== selectedValue) {
            setSelectedValue(initialSelectedValue);
        }
    }, [initialSelectedValue, selectedValue]);
    const handleButtonClick = (item) => {
        if (item.disabled)
            return;
        const newSelectedValue = item.iconName;
        setSelectedValue(newSelectedValue);
        if (onChange) {
            onChange(newSelectedValue);
        }
        onButtonClick(item);
    };
    return (jsxs("div", { className: classNames('ff-icon-radio-group', className), children: [items.map((item) => (jsx("div", { className: classNames('ff-icon-radio-button', {
                    selected: selectedValue === item.iconName,
                    disabled: item.disabled,
                }), onClick: () => handleButtonClick(item), children: jsx(Tooltip, { title: item.iconLabel, children: jsx("div", { className: classNames('icon-container', {
                            selected: selectedValue === item.iconName,
                        }), children: jsx(Icon, { name: item.iconName, hoverEffect: false, color: selectedValue === item.iconName
                                ? 'var(--drawer-footer-bg)'
                                : 'var(--brand-color)' }) }) }) }, item.iconName))), jsx("div", { className: "line-connector" })] }));
};

export { IconRadioGroup as default };
//# sourceMappingURL=IconRadioGroup.js.map
