import { useEffect, useRef } from 'react';
import { GridLayout as GridLayoutController } from 'fast-grid-layout';

function GridLayout({ config, layout, editable, onLayoutChange, children }) {
  const containerRef = useRef(null);
  const controllerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const controller = new GridLayoutController(containerRef.current, config);
    controllerRef.current = controller;

    return () => controller.disconnect();
  }, []);

  useEffect(() => {
    const controller = controllerRef.current;

    if (!controller) return;

    controller.setConfig(config);
    controller.setEditable(editable);
    controller.setLayout(layout);
    controller.onLayoutChange(onLayoutChange);
  }, [config, editable, layout, onLayoutChange, children]);

  return <div ref={containerRef}>{children}</div>;
}

function App() {
  const config = {
    columns: 12,
    rowHeight: 40,
    gap: 10,
  };

  // Format compatible with React Grid Layout.
  const layout = [
    { x: 0, y: 0, w: 3, h: 3, i: 'a' },
    { x: 3, y: 0, w: 6, h: 3, i: 'b' },
    { x: 3, y: 3, w: 3, h: 2, i: 'c' },
  ];

  return (
    <div>
      <h1>Fast Grid Layout</h1>
      <GridLayout config={config} layout={layout} editable>
        {layout.map((item) => (
          <div key={item.i} data-key={item.i}>
            {item.i.toUpperCase()}
          </div>
        ))}
      </GridLayout>
    </div>
  );
}

const gridLayout = new GridLayout(container, {
  columns: 12 // Number of columns in the grid (default: 12).
  rowHeight: 30, // Height of each row in pixels (default: 30).
  gap: 0, // Gap between grid cells (applies to both rows and columns, default: 0).
  columnGap: 0, // Horizontal gap between grid columns in pixels (default: gap).
  rowGap: 0, // Vertical gap between grid rows in pixels (default: gap).
  breakpoints: { // Named breakpoint configurations.
    sm: {
      maxWidth: 640, // Maximum container width for this breakpoint.
      columns: 6, // Each breakpoint may override columns, gaps, etc.
    },
    md: {
      maxWidth: 1024,
      columns: 8
    },
    // Largest breakpoint "default" is implicitly defined (maxWidth: Infinity).
  }
});

// Set config dynamically.
gridLayout.setConfig({ /* See above. */ });

// Toggle editing (default: off).
gridLayout.setEditable(true);

// Set layout change callback (there can only be one).
gridLayout.onLayoutChange((layout, breakpoint) => {
  // Handle layout change.
  // Second argument is the breakpoint name for which the layout was changed.
});

// Set selection change callback (there can only be one).
gridLayout.onSelectionChange((selection) => {
  // Handle selection change.
});