import { BlockStack } from '../BlockStack';
import clsx from '../../../utils/clsx';

const Disabled = ({
    id,
    style,
    className = '',
    depend = false,
    dependOn = '',
    dependOnExact = false,
    gap = 20,
    children,
}) => {
    const classes = clsx(depend && 'rbfb-disabled', className);

    const handleClick = (e) => {
        const dependent = document.getElementById(dependOn);

        if (dependent && depend) {
            e.stopPropagation();

            const label = dependOnExact ? dependent : dependent.parentElement;

            if (!label) return;

            label.classList.add('rbfb-blink');

            setTimeout(() => {
                label.classList.remove('rbfb-blink');
            }, 500);
        }
    };

    return (
        <BlockStack
            id={id}
            style={style}
            gap={gap}
            className={classes}
            onClick={handleClick}
        >
            {children}
        </BlockStack>
    );
};

export default Disabled;
