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

import { HStack, Flex, Tabs } from "@chakra-ui/react";
import { useState, useEffect } from "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 { CancelButton } from "../components/CancelButton";
import { SaveButton } from "../components/SaveButton";
import DeleteAllButton from "../components/DeleteAllButton";

export function DashboardCanvas({ view, setView, layout, setLayout, onLayoutChange }) {
  const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
  const [isDelete, setIsDelete] = useState(false);
  const [newCounter, setNewCounter] = useState(3);
  const [originalLayout, setOriginalLayout] = useState([]);

  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);
  };

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

  const onEditWidgets = () => {
    console.log("widgets are now editable");
    setOriginalLayout(layout); // Backup layout before editing
    setIsEditable(true); // Enable edit mode
  }

  const onSave = () => {
    console.log("saving widgets...");
    setIsEditable(false);
    setIsDelete(false);
    setOriginalLayout([]) // Clear backup layout
  }

  const onCancel = () => {
    console.log("canceling changes...");
    if (originalLayout.length) { 
      setLayout(originalLayout.map(item => ({
        ...item, 
        static: true
      })));
    };
    setIsEditable(false);
    setIsDelete(false);
    setOriginalLayout([]); 
  }

  const onDeleteWidgets = () => {
    console.log("Start deleting widgets...");
    setOriginalLayout(layout);
    setIsEditable(true);
    setIsDelete(true);
  }

  const DeleteWidget = (id) => {
    console.log("Deleting widget with id: ", id);
    setLayout(layout => layout.filter(w => w.i !== id));
  }

  const DeleteAll = () => {
    const confirm = window.confirm(
      "Are you sure you want to delete all widgets?"
    );
    if (confirm) {
      setLayout([]);
      onSave();
    }
    else return;
  }

  return (
    /* HEADER */
    <Tabs.Root 
      lazyMount 
      value={ view }

      // Prevent navigation away from 'My Dashboard' while in Edit mode
      onValueChange={(e) => {
        const nextView = e.value;

        if (view === "widget" && isEditable && nextView !== "widget") {
          const confirmed = window.confirm(
            "You have unsaved changes. Do you wish to discard them and continue?"
          );
          if (!confirmed) return;
          onCancel();
        }
        setView(nextView);
      }}
    >
      <Flex 
        as="header"
				position="sticky"
				top="0"
        zIndex="dropdown" // zIndex: 1100
				bg="base200"
				px={6}
				pt={3}
				align="center"
				justify="space-between"
      >
        <Tabs.List>
          <Tabs.Trigger value="widget" fontSize="lg">
            My Dashboard
          </Tabs.Trigger>
          <Tabs.Trigger value="gas" fontSize="lg">
            Gas
          </Tabs.Trigger>
          <Tabs.Trigger value="seismic" fontSize="lg">
            Seismic
          </Tabs.Trigger>
          <Tabs.Trigger value="remote" fontSize="lg">
            Remote Sensing
          </Tabs.Trigger>
          <Tabs.Trigger value="daily" fontSize="lg">
            Daily Activity
          </Tabs.Trigger>
        </Tabs.List>

        <HStack >
          {isEditable ? (
            <>
              <SaveButton onSave={ onSave } />
              <CancelButton onCancel={ onCancel } />
              {isDelete ? (
                <DeleteAllButton onDeleteAll={ DeleteAll } />
              ):(null)
              }
            </>
          ):(
            <>
              <SearchBar />
              <SettingsButton
                onAddWidget={ onAddWidget }
                onEditWidgets={ onEditWidgets }
                onDeleteWidgets={ onDeleteWidgets }
              />
            </>
          )}
        </HStack>
      </Flex>

      {/* CANVAS */}
      <Tabs.Content value="widget">
        <WidgetCanvas 
          layout={layout}
          onLayoutChange={onLayoutChange}
          isEditable={isEditable}
          isDelete={isDelete}
          DeleteWidget={DeleteWidget}
        />
      </Tabs.Content>
      <Tabs.Content value="gas">
        <Gas />
      </Tabs.Content>
      <Tabs.Content value="seismic">
        <Seismic />
      </Tabs.Content>
      <Tabs.Content value="remote">
        <RemoteSensing />
      </Tabs.Content>
      <Tabs.Content value="daily">
        <DailyActivity />
      </Tabs.Content>
    </Tabs.Root>
  );
}