Web-Frontend/client/src/components/layout/Canvas/views/DashboardCanvas.jsx

import { HStack, Flex, Tabs, Box } from "@chakra-ui/react";
import WidgetCanvas from "./DashboardCanvasNav/WidgetCanvas";
import { SearchBar } from "../components/SearchBar";
import { SettingsButton } from "../components/SettingsButton";
import { DailyActivity } from "./DashboardCanvasNav/DailyActivity";
import { Gas } from "./DashboardCanvasNav/Gas";
import { Seismic } from "./DashboardCanvasNav/Seismic";
import { RemoteSensing } from "./DashboardCanvasNav/RemoteSensing";
import { useState, useEffect } from "react";

export function DashboardCanvas() {
  const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
  const [newCounter, setNewCounter] = useState(3);
  const [layout, setLayout] = useState([
    { i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
    { i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable },
    { i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: !isEditable }
  ]);

  useEffect(() => {
    setLayout(prevLayout => 
      prevLayout.map(item => ({
        ...item,
        static: !isEditable  // static false means resizable/editable
      }))
    );
  }, [isEditable]);

  const onAddWidget = () => {
    const newId = newCounter.toString();
    setLayout(prev => [
    ...prev,
    {
      i: newId,
      x: (prev.length * 3) % 12,
      y: Infinity, 
      w: 3, 
      h: 3
    }
    ]);
    setNewCounter(prev => prev + 1);
  };

  const onEditWidgets = () => {
    console.log("widgets are now editable")
    setIsEditable(true);
  }

  const onDeleteWidgets = (id) => {
    setLayout(prev => prev.filter(w => w.i !== id));
  }

  const onLayoutChange = (newLayout) => { 
    setLayout(newLayout);
    console.log('Updated layout:', newLayout)
  };

  return (
    /* HEADER */
    <Tabs.Root lazyMount defaultValue="my dashboard">
      <Flex 
        as="header"
				position="sticky"
				top="0"
        zIndex="banner"
				bg="base200"
				px={6}
				py={3}
				align="center"
				justify="space-between"
      >
        <Tabs.List>
          <Tabs.Trigger value="my dashboard">
            My Dashboard
          </Tabs.Trigger>
          <Tabs.Trigger value="gas">
            Gas
          </Tabs.Trigger>
          <Tabs.Trigger value="seismic">
            Seismic
          </Tabs.Trigger>
          <Tabs.Trigger value="remote sensing">
            Remote Sensing
          </Tabs.Trigger>
                  <Tabs.Trigger value="daily activity">
            Daily Activity
          </Tabs.Trigger>
        </Tabs.List>

        <HStack >
          <SearchBar />
          <SettingsButton visible={isEditable}
            onAddWidget={ onAddWidget }
            onEditWidgets={ onEditWidgets }
            onDeleteWidgets={ onDeleteWidgets }
          />
        </HStack>
      </Flex>

      {/* CANVAS */}
      <Tabs.Content value="my dashboard">
        <WidgetCanvas 
          layout={layout}
          onLayoutChange={onLayoutChange}
        />
      </Tabs.Content>
      <Tabs.Content value="gas">
        <Gas />
      </Tabs.Content>
      <Tabs.Content value="seismic">
        <Seismic />
      </Tabs.Content>
      <Tabs.Content value="remote sensing">
        <RemoteSensing />
      </Tabs.Content>
      <Tabs.Content value="daily activity">
        <DailyActivity />
      </Tabs.Content>
    </Tabs.Root>
  );
}