"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleGroup = exports.ToggleGroupContext = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Flex_1 = require("../Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const react_1 = require("react");
const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
exports.ToggleGroupContext = React.createContext({
    toggleButtons: [],
    activeIndex: -1,
});
const ToggleGroup = (props) => {
    const ref = (0, react_1.useRef)(null);
    const [context, setContext] = React.useState({
        toggleButtons: [],
        activeIndex: 0,
    });
    const setActiveIndex = React.useCallback((index) => {
        setContext((prev) => ({
            ...prev,
            activeIndex: index,
        }));
    }, []);
    return (React.createElement(exports.ToggleGroupContext.Provider, { value: context },
        React.createElement(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, clsx_1.default)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
            // make the shadow of child Toggle buttons invisible when the group is not focused
            'twa:not-focus-within:[--ab-focus-light__box-shadow:none]', 'twa:not-focus-within:[--ab-focus__box-shadow:none]'), onMouseDown: (event) => {
                const index = context.toggleButtons.findIndex((btn) => (0, contains_1.default)(btn.node, event.target));
                if (index !== -1) {
                    setActiveIndex(index);
                }
            }, onKeyDown: (event) => {
                const { toggleButtons, activeIndex } = context;
                if (event.key === ' ') {
                    event.preventDefault();
                    event.stopPropagation();
                    const activeButton = toggleButtons[activeIndex];
                    if (!activeButton) {
                        return;
                    }
                    activeButton.toggle();
                    return;
                }
                if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
                    event.preventDefault();
                    event.stopPropagation();
                    const node = ref.current;
                    if (!node) {
                        return;
                    }
                    const dir = event.key === 'ArrowLeft' ? -1 : 1;
                    let nextIndex = activeIndex + dir;
                    if (nextIndex < 0) {
                        nextIndex = toggleButtons.length - 1;
                    }
                    else if (nextIndex > toggleButtons.length - 1) {
                        nextIndex = 0;
                    }
                    setActiveIndex(nextIndex);
                }
            } }, props.children)));
};
exports.ToggleGroup = ToggleGroup;
