// This component defines a generic Widget that can be dynamically resized and 
// dragged inside the canvas
// Content not included, must be populated using custom charts plots and notifications

import { useState } from 'react';
import GridLayout, { WidthProvider } from 'react-grid-layout';
import Widget from '../Widget.jsx';
import { useSlotRecipe, chakra } from '@chakra-ui/react';

export default function WidgetCanvas() {
    // Define widgets initial position and size
    // TODO Add dynamic adding/deleting of widgets via options button 
    const recipe = useSlotRecipe({ key: "widget" });
    const styles = recipe();
    const ResponsiveGridLayout = WidthProvider(GridLayout);

    const [layout, setLayout] = useState([
        { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
        { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
        { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
    ]);

    const onLayoutChange = (newLayout) => { 
        setLayout(newLayout);
        console.log('Updated layout:', newLayout)
    };

    return (
        <ResponsiveGridLayout
            className="layout"
            layout={layout}
            cols={12} // Total columns in grid
            rowHeight={30} //Height of a single row in px
            isBounded={true} // Total width of the grid
            margin={[10, 10]} // [horizontal, vertical] gap
            onLayoutChange={onLayoutChange}
            draggableHandle=".widget-handle" // Make only the header draggable
        >
            {layout.map((item) => (
                <chakra.div key={item.i} css={styles.root}>
                    <Widget title="VDAP Widget" />
                </chakra.div>
            ))}
        </ResponsiveGridLayout>
    );
}