"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
var React = require('react');
var chip = require('../chip/chip.cjs');
var text = require('../text/text.cjs');
var select_module = require('./select.module.css.cjs');
var index$1 = require('../../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.cjs');

/*
 * 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 = React.forwardRef(({ data = [], ...props }, ref) => {
    const containerRef = React.useRef(null);
    const [visibleCount, setVisibleCount] = React.useState(data.length);
    const [containerWidth, setContainerWidth] = React.useState(0);
    React.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();
    }, []);
    React.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 (jsxRuntime.jsx("div", { ref: containerRef, className: index.cx(select_module.default.valueContent), children: jsxRuntime.jsx(index$1.Value, { ref: ref, ...props, children: jsxRuntime.jsxs("div", { className: index.cx(select_module.default.valueContent), children: [data.slice(0, visibleCount).map(item => (jsxRuntime.jsx(chip.Chip, { leadingIcon: item.leadingIcon, children: typeof item.children === 'string' ? item.children : item.value }, item.value))), data.length > visibleCount && (jsxRuntime.jsxs(text.Text, { children: ["+", data.length - visibleCount] }))] }) }) }));
});

exports.SelectMultipleValue = SelectMultipleValue;
//# sourceMappingURL=select-multiple-value.cjs.map
