import createGrid from 'light-weight-grid-layout';
const initialMatrix = [
  [
    { id: 'item1', x: 0, y: 0 },
    { id: 'item2', x: 1, y: 0 },
    { id: 'item3', x: 2, y: 0 },
  ],
  [
    { id: 'item4', x: 0, y: 1 },
    { id: 'item5', x: 2, y: 1 },
  ],
];
const CELL_SIZE = 100;
const { getMatrix, attachDnd, subscribe } = createGrid(initialMatrix);
function render() {
  const container = document.getElementById('grid'); // if there is element with id='grid'
  if (!container) return;
  container.style.position = 'relative';
  container.style.margin = '50px';
  container.innerHTML = '';
  getMatrix()
    .flat()
    .forEach((cell) => {
      if (!cell) return;
      const el = document.createElement('div');
      el.className = 'grid-item';
      el.dataset.id = cell.id;
      el.style.cssText = `
        position: absolute;
        width: ${CELL_SIZE}px;
        height: ${CELL_SIZE}px;
        left: ${cell.x * CELL_SIZE}px;
        top: ${cell.y * CELL_SIZE}px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
      `;
      el.textContent = cell.id;
      container.appendChild(el);
      attachDnd(el, cell.id);
    });
}
export { render, subscribe };
// render();
// subscribe(render);