import { jsx } from 'react/jsx-runtime';
import { useRef, useState, useLayoutEffect } from 'react';
import Button from '../Button/Button.js';
import Tooltip from '../Tooltip/Tooltip.js';
import { truncateText, isTextTruncated } from '../../utils/truncateText/truncateText.js';

const ChooseFile = ({ variant = 'primary', size = 'small', onClick, label = 'Choose File', disabled = false, type = 'button', className = '', style = {}, iconName, isChooseFile = false, buttonWidth = 'auto', buttonHeight = 'auto', selectedFile = {}, handleCloseIcon, isMandatory = false, }) => {
    const wrapperRef = useRef(null);
    const [width, setWidth] = useState(0);
    const END_PADDING_RESERVE = 10;
    useLayoutEffect(() => {
        if (wrapperRef.current) {
            setWidth(wrapperRef.current.getBoundingClientRect().width - END_PADDING_RESERVE);
        }
    }, [buttonWidth]);
    const text = selectedFile?.name || label;
    const truncatedText = width ? truncateText(text, width, 'pixel') : text;
    const showTooltip = width ? isTextTruncated(text, width, 'pixel') : false;
    return (jsx("div", { ref: wrapperRef, style: { width: buttonWidth }, children: jsx(Tooltip, { title: showTooltip ? text : '', children: jsx(Button, { variant: variant, label: truncatedText, type: type, onClick: onClick, buttonWidth: buttonWidth, buttonHeight: buttonHeight, isChooseFile: isChooseFile, size: size, disabled: disabled, className: className, iconName: iconName, style: style, iconPosition: "right", selectedFile: selectedFile, handleCloseIcon: handleCloseIcon, isMandatory: isMandatory }) }) }));
};

export { ChooseFile as default };
//# sourceMappingURL=ChooseFile.js.map
