import { useRef } from 'react';
import { arrow as createArrow, } from '@floating-ui/react';
const ARROW_HEIGHT_PX = 6;
const ARROW_WIDTH_PX = 12;
const getContentOffset = (placement) => {
    if (!placement || placement.includes('auto'))
        return {};
    const contentPlacement = placement.split('-')[0].trim();
    if (contentPlacement === 'auto')
        return {};
    const cssFieldFor = {
        top: 'top',
        bottom: 'top',
        right: 'left',
        left: 'left',
    };
    const offsetFor = {
        top: -ARROW_HEIGHT_PX,
        bottom: ARROW_HEIGHT_PX,
        left: -ARROW_HEIGHT_PX,
        right: ARROW_HEIGHT_PX,
    };
    return {
        [cssFieldFor[contentPlacement]]: `${offsetFor[contentPlacement]}px`,
    };
};
export const useArrow = (showArrow) => {
    const arrowRef = useRef(null);
    const getArrowProps = (context) => ({
        ref: arrowRef,
        context,
        width: ARROW_WIDTH_PX,
        height: ARROW_HEIGHT_PX,
    });
    const getContentWithArrowStyles = (floatingPlacement) => (showArrow ? getContentOffset(floatingPlacement) : {});
    return {
        getArrowProps,
        arrowMiddleware: showArrow
            ? createArrow({
                element: arrowRef,
                padding: 6,
            })
            : undefined,
        getContentWithArrowStyles,
    };
};
//# sourceMappingURL=useArrow.js.map