import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import classNames from 'classnames';
import './IconRadioGroup.scss';
import Icon from '../Icon/Icon';
import Tooltip from '../Tooltip';
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 default IconRadioGroup;
//# sourceMappingURL=IconRadioGroup.js.map