"use client";
import { jsx, jsxs } from 'react/jsx-runtime';
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
import { Chip } from '../chip/chip.js';
import { Text } from '../text/text.js';
import styles from './select.module.css.js';
import { Value } from '../../node_modules/.pnpm/@radix-ui_react-select@2.2.5_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@19.1.9_irkq3yh3qlkawac7zwq2rwd6bi/node_modules/@radix-ui/react-select/dist/index.js';

/*
 * Approximate width calculation based on font size
 * Average character width is roughly 0.6 times the font size
 */
const calculateTextWidth = (text, fontSize = 11) => {
    const avgCharWidth = fontSize * 0.6;
    return text.length * avgCharWidth;
};
const SelectMultipleValue = forwardRef(({ data = [], ...props }, ref) => {
    const containerRef = useRef(null);
    const [visibleCount, setVisibleCount] = useState(data.length);
    const [containerWidth, setContainerWidth] = useState(0);
    useLayoutEffect(() => {
        if (!containerRef.current)
            return;
        const resizeObserver = new ResizeObserver(entries => {
            for (const entry of entries) {
                setContainerWidth(entry.contentRect.width - 70);
            }
        });
        resizeObserver.observe(containerRef.current);
        return () => resizeObserver.disconnect();
    }, []);
    useLayoutEffect(() => {
        if (!containerRef.current || data.length === 0)
            return;
        // Calculate chip widths based on text length and icon width
        const chipWidths = data.map(item => {
            const text = typeof item.children === 'string' ? item.children : item.value;
            const iconWidth = item.leadingIcon ? 16 : 0;
            return calculateTextWidth(text) + 8 + iconWidth;
        });
        let totalWidth = 0;
        let count = 0;
        // Always show at least one chip
        if (data.length > 0) {
            count = 1;
            totalWidth = chipWidths[0];
        }
        // Try to fit more chips
        for (let i = 1; i < data.length; i++) {
            const newWidth = totalWidth + chipWidths[i];
            if (newWidth <= containerWidth) {
                count++;
                totalWidth = newWidth;
            }
            else {
                break;
            }
        }
        setVisibleCount(count);
    }, [data, containerWidth]);
    return (jsx("div", { ref: containerRef, className: cx(styles.valueContent), children: jsx(Value, { ref: ref, ...props, children: jsxs("div", { className: cx(styles.valueContent), children: [data.slice(0, visibleCount).map(item => (jsx(Chip, { leadingIcon: item.leadingIcon, children: typeof item.children === 'string' ? item.children : item.value }, item.value))), data.length > visibleCount && (jsxs(Text, { children: ["+", data.length - visibleCount] }))] }) }) }));
});

export { SelectMultipleValue };
//# sourceMappingURL=select-multiple-value.js.map
