import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useRef, useState } from 'react';
import { cn } from '../../cn';
import { useHoverTransforms } from './hover-transforms';
import { Outer } from './Outer';
export const Button3D = ({ children, className, disabled, ...buttonProps }) => {
    const [dimensions, setDimensions] = useState(null);
    const ref = useRef(null);
    const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled));
    const onPointerEnter = useCallback((e) => {
        if (e.pointerType !== 'mouse') {
            return;
        }
        setDimensions((prevDim) => {
            if (prevDim) {
                return prevDim;
            }
            if (!ref.current) {
                throw new Error('Ref is not set');
            }
            const { childNodes } = ref.current;
            if (childNodes.length === 0) {
                throw new Error('No child nodes');
            }
            const childNode = childNodes[0];
            if (!childNode) {
                throw new Error('No child node');
            }
            const rect = childNode.getBoundingClientRect();
            const { borderRadius } = getComputedStyle(childNode);
            const cornerRadius = borderRadius.includes('e+0')
                ? Infinity
                : parseInt(borderRadius !== null && borderRadius !== void 0 ? borderRadius : '0', 10);
            return {
                width: rect.width,
                height: rect.height,
                borderRadius: Math.min(cornerRadius, rect.width / 2, rect.height / 2),
            };
        });
    }, []);
    const content = (_jsx("button", { type: "button", disabled: disabled, className: cn('text-black', 'flex', 'justify-center', 'bg-white', 'items-center', 'font-brand', 'border-solid', 'text-[1em]', 'rounded-md', 'border-black', 'border-2', 'border-b-4', 'cursor-pointer', 'px-4', 'py-3', 'disabled:cursor-default', 'disabled:border-gray-500', 'disabled:text-gray-500', 'transition-colors', className), ...buttonProps, children: children }));
    return (_jsx("div", { ref: ref, className: "contents", onPointerEnter: onPointerEnter, children: dimensions && (isActive || progress > 0) ? (_jsx(Outer, { parentRef: ref, width: dimensions.width, height: dimensions.height, cornerRadius: dimensions.borderRadius, hoverTransform: progress, children: content })) : (content) }));
};
