import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { useRef, useState, useEffect, useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { debounce } from '../../../utils/debounce.js';
import { segmentedTheme } from './Segmented.theme.js';
import { SegmentedContext } from './SegmentedContext.js';
import { SegmentedItem } from './SegmentedItem.js';
import { GlassEffect } from '../../effects/GlassEffect/GlassEffect.js';

/**
 * Segmented component for selecting one option from a set of segments
 * Uses compound component pattern with Segmented.Item
 */
const SegmentedComponent = React__default.forwardRef(({ value, onChange, size = "md", disabled = false, block = false, children, className, slidingBackgroundClassName, theme, ...props }, ref) => {
    var _a;
    const containerRef = useRef(null);
    const [activeStyle, setActiveStyle] = useState({});
    const updateActiveStyle = () => {
        if (!containerRef.current || !value)
            return;
        const activeButton = containerRef.current.querySelector(`[data-value="${value}"]`);
        if (activeButton) {
            const containerRect = containerRef.current.getBoundingClientRect();
            const buttonRect = activeButton.getBoundingClientRect();
            setActiveStyle({
                width: buttonRect.width,
                height: buttonRect.height,
                transform: `translateX(${buttonRect.left - containerRect.left - 2}px)`,
            });
        }
    };
    useEffect(() => {
        updateActiveStyle();
    }, [value]);
    // Debounced resize handler for better performance
    const debouncedUpdateActiveStyle = useMemo(() => debounce(updateActiveStyle, 100), [updateActiveStyle]);
    useEffect(() => {
        window.addEventListener('resize', debouncedUpdateActiveStyle);
        return () => window.removeEventListener('resize', debouncedUpdateActiveStyle);
    }, [debouncedUpdateActiveStyle]);
    const contextValue = {
        selectedValue: value,
        onChange,
        size,
        disabled,
    };
    return (jsx(SegmentedContext.Provider, { value: contextValue, children: jsxs("div", { ref: (node) => {
                containerRef.current = node;
                if (typeof ref === 'function') {
                    ref(node);
                }
                else if (ref) {
                    ref.current = node;
                }
            }, role: "tablist", "aria-orientation": "horizontal", className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className // User overrides take precedence
            ), "data-size": size, "data-disabled": disabled, "data-block": block, ...props, children: [jsx(GlassEffect, { rounded: "var(--segmented-radius)", blendModeOuter: "soft-light" }), value && (jsx("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) || segmentedTheme.slidingBackgroundStyle, slidingBackgroundClassName // User overrides take precedence
                    ), style: activeStyle })), children] }) }));
});
// Set display name for dev tools and Storybook
SegmentedComponent.displayName = "Segmented";
// Create compound component with proper typing
const Segmented = Object.assign(SegmentedComponent, {
    Item: SegmentedItem,
});

export { Segmented };
