import React, { useState, useEffect } from "react";
import GridLayout from "react-grid-layout";
import { Responsive, WidthProvider } from "react-grid-layout";
import {
  Paper,
  Divider,
  TextareaAutosize,
  makeStyles,
  Grid,
  Button,
} from "@material-ui/core";

const ResponsiveReactGridLayout = WidthProvider(Responsive);

const generateLayout = (numItems, itemWidth, itemHeight) => {
  const layout = [];
  const numColumns = 12;

  for (let i = 0; i < numItems; i++) {
    const item = {
      i: `item${i + 1}`,
      x: (i % (numColumns / itemWidth)) * itemWidth,
      y: Math.floor(i / (numColumns / itemWidth)) * itemHeight,
      w: itemWidth,
      h: itemHeight,
    };
    layout.push(item);
  }

  return layout;
};

export function TemplateRender() {
  const [layout, setLayout] = useState(generateLayout(1, 3, 2));
  const [layouts, setLayouts] = useState({ lg: layout });

  const handleLayoutChange = (currentLayout, allLayouts) => {
    console.log("Current Layouts:", allLayouts);
    setLayouts(allLayouts);
    const updatedLayout = currentLayout.map((item) => ({
      i: item.i,
      x: item.x,
      y: item.y,
      w: item.w,
      h: item.h,
    }));
    setLayout(updatedLayout);
  };

  const handleDeleteItem = (itemId) => {
    const newLayout = layout.filter((item) => item.i !== itemId);
    setLayout(newLayout);
    setLayouts({ lg: newLayout });
  };

  const handleAddItem = (currentIndex) => {
    const newLayout = [...layout];
    const currentItem = newLayout[currentIndex];
    const newItemWidth = currentItem.w;
    const newItemHeight = currentItem.h;

    const newItem = {
      i: `item${layout.length + 1}`,
      x: currentItem.x + currentItem.w,
      y: currentItem.y,
      w: newItemWidth,
      h: newItemHeight,
    };

    newLayout.splice(currentIndex + 1, 0, newItem);

    // Update the positions of subsequent items
    for (let i = currentIndex + 2; i < newLayout.length; i++) {
      newLayout[i].x += newItemWidth;
    }

    setLayout(newLayout);
    setLayouts({ lg: newLayout });
  };

  return (
    <>
      <Paper>
        <h3 className="p-5 mb-0 fw-bolder fs-4">Preview</h3>
        <Divider />
        <div className="p-5">
          <div>
            <ResponsiveReactGridLayout
              className="layout"
              layouts={layouts}
              rowHeight={30}
              cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
              onLayoutChange={handleLayoutChange}
            >
              {layout?.map((item, index) => (
                <div
                  key={item.i}
                  className="grid-item"
                  onMouseDown={() => {
                    console.log("item pressed");
                  }}
                >
                  <div>
                    {item.i}
                    <Button
                      onMouseDown={(e) => {
                        e.stopPropagation();
                        console.log("add-item pressed");
                        handleAddItem(index);
                      }}
                      variant="contained"
                      color="primary"
                    >
                      Add Item
                    </Button>
                    <Button
                      onMouseDown={(e) => {
                        e.stopPropagation();
                        console.log("delete-item pressed");
                        handleDeleteItem(item.i);
                      }}
                      variant="contained"
                      color="secondary"
                    >
                      Delete Item
                    </Button>
                  </div>
                </div>
              ))}
            </ResponsiveReactGridLayout>
          </div>
        </div>
      </Paper>
    </>
  );
}

i tried mousedown and onclick on item, but item pressed is only being console logged when i press add item.
i essentially want to detect whether item is ‘active’ or not. i also tried adding a div inside item and adding a listener on it. clicking text inside inner div kind of worked, but i want to detect press on any part of item and not just some specific part or text.