import React, { useRef } from "react";
import "./css/FinsembleToggle.css";
export const FinsembleToggleButtonBar = ({ selected, options, onChange, enabled = true, }) => {
    const buttonList = useRef(null);
    const changeButton = (fromKey, direction) => {
        var _a, _b;
        const buttons = (_a = buttonList.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[role='radio']");
        if (buttons === undefined) {
            return;
        }
        if (fromKey === buttons.length) {
            return;
        }
        (_b = buttons[fromKey + direction]) === null || _b === void 0 ? void 0 : _b.focus();
    };
    return (React.createElement("span", { className: "finsembleToggleButtonBar" },
        React.createElement("span", { className: "toggle-text-label-wrapper", role: "radiogroup", ref: buttonList }, options.map((option, key) => {
            const valid = enabled && !option.disabled;
            return (React.createElement("span", { "aria-label": option.ariaLabel, key: key, className: `toggle-text-label ${valid ? "" : "disabled"} toggle-${key}`, role: "radio", "aria-checked": selected === option.value, tabIndex: selected === option.value && valid ? 0 : -1, onClick: () => {
                    valid && onChange(option.value);
                }, onKeyDown: (e) => {
                    switch (e.key) {
                        case "ArrowLeft": {
                            changeButton(key, -1);
                            break;
                        }
                        case "ArrowRight": {
                            changeButton(key, 1);
                            break;
                        }
                        case "Enter": {
                            enabled && onChange(option.value);
                        }
                        default: {
                        }
                    }
                } }, option.label));
        }))));
};
//# sourceMappingURL=FinsembleToggleButtonBar.js.map