import BaseObject from "./BaseObject";

const LayerGroup = ( { children, ...props } ) => {

    // calc width based on children. to calculate the width of the group within the canvas, we calculate the distance between the lowest x value of the children and the highest (x value + the width) of the children
    const groupRect = ( () => {
        let minWidth = 100000; // arbitrary large number to satisfy the first Math.min call
        let maxWidth = 0;
        let minHeight = 100000; // arbitrary large number to satisfy the first Math.min call
        let maxHeight = 0;

        children && children.forEach( ( child ) => {
            const { x, width, y, height } = child.props;
            minWidth = Math.min( minWidth, x );
            maxWidth = Math.max( maxWidth, x + width );
            minHeight = Math.min( minHeight, y );
            maxHeight = Math.max( maxHeight, y + height );
        } );
        return {
            x: minWidth,
            y: minHeight,
            width: maxWidth - minWidth,
            height: maxHeight - minHeight
        };
    } )();


    // console.log( props );

    return (
        <BaseObject
            {...props}
            tag="div"
            x={0} // 0 to cover the whole canvas size
            y={0}
            width={props?.canvas?.width || 0} //set to canvas size so it is easily grabbable and moveable
            height={props?.canvas?.height || 0}
            rect={groupRect} //virtual area of the group, composed of the outer bounderies of all its children
            // vWidth={groupRect.width}
            // vHeight={groupRect.height}
            // x={groupRect.x}
            // y={groupRect.y}
            // width={groupRect.width}
            // height={groupRect.height}
            attr={{
                'data-width': groupRect.width,
                'data-height': groupRect.height,
                'data-x': groupRect.x,
                'data-y': groupRect.y
            }}
        // styles={{
        //     marginLeft: "-" + groupRect.x.toString() + "px",
        //     marginTop: "-" + groupRect.y.toString() + "px",
        // }}
        >
            {children}
        </BaseObject>
    );

}

export default LayerGroup;