// App.js
import React from 'react';
import Editor from './Editor'; 

const App = () => {
  return (
    <div className="container">
      <Editor />
    </div>
  );
};

export default App;

// BlockMap.js
const BlockMap = {
  horizontal: {
    GridSize: { rows: 8, cols: 12 },
    Photo: { columns: 4, height: 2 },
    Contact: { columns: 4, height: 1 },
    Logo: { columns: 2, height: 1 },
    Links: { columns: 3, height: 1 },
    Videos: { columns: 6, height: 3 },
    Badges: { columns: 2, height: 1 },
    PDFs: { columns: 6, height: 2 },
    Maps: { columns: 6, height: 3 },
    Galleries: { columns: 12, height: 4 },
    BusinessHours: { columns: 4, height: 2 },
  },
  vertical: {
    GridSize: { rows: 12, cols: 8 },
    Photo: { columns: 6, height: 2 },
    Contact: { columns: 6, height: 1 },
    Logo: { columns: 4, height: 1 },
    Links: { columns: 4, height: 1 },
    Videos: { columns: 8, height: 2 },
    Badges: { columns: 4, height: 1 },
    PDFs: { columns: 6, height: 2 },
    Maps: { columns: 8, height: 3 },
    Galleries: { columns: 8, height: 4 },
    BusinessHours: { columns: 6, height: 2 },
  },
};

export default BlockMap;


// Editor.js
import React, { useState } from 'react';
import GridLayout from 'react-grid-layout';
import BlockMap from './BlockMap'; 
import './editor.css'; // Include styles

const Editor = () => {
  const [items, setItems] = useState([]);
  const [layoutType, setLayoutType] = useState('horizontal');

  const addBlock = (type) => {
    const newBlock = {
      i: `block-${items.length + 1}`,
      type: type,
      x: 0,
      y: Infinity, // puts it at the bottom
      w: BlockMap[layoutType][type].columns,
      h: BlockMap[layoutType][type].height, // Set the height based on BlockMap
    };
    setItems((prevItems) => [...prevItems, newBlock]);
  };

  const toggleLayoutType = () => {
    setLayoutType((prev) => (prev === 'horizontal' ? 'vertical' : 'horizontal'));
  };

  return (
    <div>
      <div className="my-3">
        <button className="btn btn-primary" onClick={toggleLayoutType}>
          Switch to {layoutType === 'horizontal' ? 'Vertical' : 'Horizontal'} Layout
        </button>
      </div>
      <div className="mb-3">
        {Object.keys(BlockMap[layoutType])
          .filter((type) => type !== 'GridSize')
          .map((type) => (
            <button
              key={type}
              className="btn btn-secondary me-2"
              onClick={() => addBlock(type)}
            >
              Add {type}
            </button>
          ))}
      </div>
      <GridLayout
        className="layout"
        cols={BlockMap[layoutType].GridSize.cols} // total grid columns
        rowHeight={30} // height of each row in pixels
        width={1200} // total width of the grid layout
      >
        {items.map((item) => (
          <div key={item.i} className="grid-item" data-grid={item}>
            <div className="drag-handle">{item.type}</div>
          </div>
        ))}
      </GridLayout>
    </div>
  );
};

export default Editor;


// DraggableBlock.js
import React from 'react';

const DraggableBlock = ({ block, onMouseDown }) => {
  return (
    <div
      onMouseDown={onMouseDown}
      className="draggable-block"
    >
      {block.type}
    </div>
  );
};

export default DraggableBlock;

/* editor.css */
.layout {
  background: #f0f0f0; /* Background for the layout */
  border: 2px solid #ddd; /* Overall border for layout visibility */
}

.grid-item {
  background-color: lightblue;
  border: 2px solid #007bff; /* More visible borders for grid items */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* Ensures blocks fill their grid area */
  color: #333; /* Color of text inside the block */
}

.drag-handle {
  cursor: grab;
  padding: 10px; 
  color: #fff;
  text-align: center;
  border-radius: 5px; /* Optional: for styling */
}


Whats good:
- Can click the buttons to add blocks.
- can switch layout
- can move blocks inside grid

whats bad:
- deadspace on the rightside of the grid(blocks can not be placed there and it looks strange) Why is this?
- the grid columns are not displaying, users can not tell where they can place block
- grid should be displayed, instead a long tiny rectangle is.

refactor code to fix this.