Web-Frontend/client/src/components/Canvas/views/Home.jsx

import { HStack, Flex, Tabs } from "@chakra-ui/react";
import MyDashboard from "./HomeTabs/MyDashboard";
import { SearchBar } from "../CanvasComponents/SearchBar";
import { SettingsButton } from "../CanvasComponents/SettingsButton";
import { DailyActivity } from "./HomeTabs/DailyActivity";
import { Gas } from "./HomeTabs/Gas";
import { Seismic } from "./HomeTabs/Seismic";
import { RemoteSensing } from "./HomeTabs/RemoteSensing";
import { CancelButton } from "../CanvasComponents/CancelButton";
import { SaveButton } from "../CanvasComponents/SaveButton";
import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
import { v4 as uuid } from 'uuid';

export default function Home({...props}) {
  // deconstructing props
  const { view, layout, setLayout, setOriginalLayout,  onLayoutChange, onChangeView, onCancel, setOriginalWidgets,
    isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;

  // const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => {
  //   setLayout(prev => [
  //     ...prev,
  //     {
  //       i: ID,
  //       x: (prev.length * 3) % 12,
  //       y: Infinity,
  //       w: w, 
  //       h: h,
  //       minW: minw,
  //       minH: minh,
  //       maxW: maxw,
  //       maxH: maxh,
  //       static: false,
  //       resizeHandles: ['se']
  //     }
  //   ]);
  //   onEditWidgets();
  // };

  function appendWidget(name, w, h, minw, minh, maxw, maxh) {
    beginEditIfNeeded(); // Save state before anything else
    
    const newID = uuid();      // could be replaced with something else like guid
    const COLS = 16;
    const W = w ?? 3;
    const H = h ?? 3; 

    setWidgetArray([           // updating widget array containing info on the types of widgets
      ...widgetArray,
      {i: newID, widget: name }
    ]);
    // onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
    
    setLayout(prev => [
      ...prev,
      {
        i: newID,
        // x: (prev.length * 3) % 12,
        // y: Infinity,
        x: (prev.length * W) % COLS, 
        y: 0,
        w: w, 
        h: h,
        minW: minw,
        minH: minh,
        maxW: maxw,
        maxH: maxh,
        static: false,
        resizeHandles: ['se']
      },
    ]);
  }

  const onEditWidgets = () => {
    console.log("widgets are now editable");
    setOriginalLayout(layout); // Backup layout before editing
    // Set all widgets to editable, static: false
    setLayout(prevLayout =>
      prevLayout.map(item => ({
        ...item, 
        static: false
      }))
    );
    setIsEditable(true); // Enable edit mode
  }

  const onSave = () => {
    console.log("saving widgets...");
    // Set all widgets back to static: true
    setLayout(prevLayout => 
      prevLayout.map(item => ({
        ...item,
        static: true
    }))
  );
    setIsEditable(false);
    setIsDelete(false);
    setOriginalLayout([]); // Clear backup layout
    setOriginalWidgets([]);
  }

  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));
    setWidgetArray(widgetArray => widgetArray.filter(w => w.i !== ID));
  }

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

  // Prop Forwarding
  const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget };
  const settingsButtonProps = { onEditWidgets, onDeleteWidgets, appendWidget };
  
  return (
    /* HEADER */
    <Tabs.Root 
      width="100%"
      height="100%"
      lazyMount 
      value={ view }
      variant="line"
      // Prevent navigation away from 'My Dashboard' while in Edit mode
      onValueChange={(e) => {
        const nextView = e.value;
        onChangeView(nextView); 
      }}
    >
      <Flex 
        as="header"
				position="sticky"
				top="0"
        zIndex="dropdown" // zIndex: 1100
				bg="base200"
				px={5}
				pt={3}
        pb={2}
				align="center"
				justify="space-between"
        width="100%"
      >
        <Tabs.List>
          <Tabs.Trigger value="mydashboard" 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 width="258px" justifyContent="flex-end">
          {isEditable ? (
            <>
              <SaveButton onSave={ onSave } />
              <CancelButton onCancel={ onCancel } />
              {isDelete ? (
                <DeleteAllButton onDeleteAll={ DeleteAll } />
              ):(null)
              }
            </>
          ):(
            <>
              <SearchBar />
              <SettingsButton {...settingsButtonProps}/>
            </>
          )}
        </HStack>
      </Flex>

      {/* CANVAS */}
      <Tabs.Content value="mydashboard">
        <MyDashboard {...MyDashboardProps}/>
      </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>
  );
}