import { PanelGridProvider, PanelGridRenderer } from 'panelgrid';
import type { PanelCoordinate } from 'panelgrid';
import 'panelgrid/styles.css';

const initialPanels: PanelCoordinate[] = [
  { id: 1, x: 0, y: 0, w: 2, h: 2 },
  { id: 2, x: 2, y: 0, w: 1, h: 1 },
  { id: 3, x: 0, y: 2, w: 1, h: 1 },
];

// Mark panel component with "use client" for Next.js App Router
"use client";
function PanelContent({ id }: { id: number | string }) {
  return <div>Panel {id}</div>;
}

function App() {
  return (
    <PanelGridProvider
      panels={initialPanels}
      columnCount={4}
      gap={8}
    >
      <PanelGridRenderer>{PanelContent}</PanelGridRenderer>
    </PanelGridProvider>
  );
}

// app/dashboard/page.tsx (Server Component)
import { PanelGridProvider, PanelGridRenderer } from 'panelgrid';
import { PanelContent } from './PanelContent'; // Client Component
import 'panelgrid/styles.css';

export default function DashboardPage() {
  const panels = [
    { id: 1, x: 0, y: 0, w: 2, h: 2 },
    { id: 2, x: 2, y: 0, w: 2, h: 2 },
  ];

  return (
    <PanelGridProvider panels={panels} columnCount={4} gap={8}>
      <PanelGridRenderer>{PanelContent}</PanelGridRenderer>
    </PanelGridProvider>
  );
}

// app/dashboard/PanelContent.tsx (Client Component)
"use client";
import { usePanelGridControls } from 'panelgrid';
import type { PanelId } from 'panelgrid';

export function PanelContent({ id }: { id: PanelId }) {
  const { removePanel } = usePanelGridControls();

  return (
    <div>
      <h3>Panel {id}</h3>
      <button onClick={() => removePanel(id)}>Remove</button>
    </div>
  );
}

import { PanelGridProvider, rearrangePanels } from 'panelgrid';
import type { RearrangementFunction, PanelCoordinate } from 'panelgrid';

// Example: Custom rearrangement that prevents vertical movement
const customRearrange: RearrangementFunction = (
  movingPanel,
  allPanels,
  columnCount
) => {
  // Implement your custom collision resolution logic
  // For example: only allow horizontal panel movement

  // You can also wrap the default function
  const result = rearrangePanels(movingPanel, allPanels, columnCount);

  // Apply custom modifications
  return result.map(panel => ({
    ...panel,
    // Your custom logic here
  }));
};

function App() {
  return (
    <PanelGridProvider
      panels={initialPanels}
      columnCount={4}
      gap={8}
      rearrangement={customRearrange}
    >
      <PanelGridRenderer>{PanelContent}</PanelGridRenderer>
    </PanelGridProvider>
  );
}

const noRearrangement: RearrangementFunction = (movingPanel, allPanels) => {
  // Simply update the moving panel without affecting others
  return allPanels.map(panel =>
    panel.id === movingPanel.id ? movingPanel : panel
  );
};

const zoneRearrangement: RearrangementFunction = (
  movingPanel,
  allPanels,
  columnCount
) => {
  // Define zones where panels can be placed
  const zones = {
    left: { xMin: 0, xMax: 2 },
    right: { xMin: 3, xMax: 5 }
  };

  // Use default rearrangement
  const result = rearrangePanels(movingPanel, allPanels, columnCount);

  // Constrain panels to their zones
  return result.map(panel => {
    const inLeftZone = panel.x < 3;
    const zone = inLeftZone ? zones.left : zones.right;

    return {
      ...panel,
      x: Math.max(zone.xMin, Math.min(panel.x, zone.xMax))
    };
  });
};

"use client";
function MyPanel({ id }: { id: PanelId }) {
  return <div>Panel {id}</div>;
}

// Pass the component type (not JSX)
<PanelGridRenderer>{MyPanel}</PanelGridRenderer>

"use client";
function CustomPanel({ id }: { id: PanelId }) {
  return <MyPanel id={id} customProp="value" />;
}

<PanelGridRenderer>{CustomPanel}</PanelGridRenderer>

import {
  detectCollisions,
  hasCollision,
  snapToGrid,
  findNewPosition
} from 'panelgrid/helpers';