import React, { useRef, useEffect } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { withAlignTarget } from 'redhotmagma-visualization/AlignTargetProvider';
import clsx from 'clsx';

const style = {
    root: {
        flex: 'inherit',
        display: 'inherit',
        flexDirection: 'inherit',
        width: 'inherit',
        height: 'inherit',
        // the pointer events should be passed through to the visualization component
        pointerEvents: 'inherit', // important: don't remove this
    },
};

export const AlignTargetContainer = withStyles(style, { name: 'AlignTargetContainer' })(
    withAlignTarget(({ alignTarget, children, classes, className }) => {
        const ref = useRef();
        useEffect(() => {
            if (ref.current) {
                alignTarget.add(ref.current);
            }
            return () => alignTarget.remove(ref.current);
        }, [alignTarget]);
        return (
            <div ref={ref} className={clsx(classes.root, className)}>
                {children}
            </div>
        );
    })
);
