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

import { HStack, Flex, Tabs, Button } from "@chakra-ui/react";
import { useState } from "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';
import { CanvasHeaderTabs } from '../CanvasComponents/CanvasHeaderTabs';
import { DASHBOARD_TABS } from "@/constants/viewKeys";

export default function Home() {
  const [isEditable, setIsEditable]           = useState(false); // editable=true means static=false (vice versa)
  const [isDelete, setIsDelete]               = useState(false);
  const [originalLayout, setOriginalLayout]   = useState([]);
  const [originalWidgets, setOriginalWidgets] = useState([]);
  const [layout, setLayout]                   = useState([]);
  const [widgetArray, setWidgetArray]         = useState([]);

  function appendWidget(name, w, h, min_w, minh, max_w, max_h) {
    saveLayoutState(); // 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, min_w, minh, max_w, max_h);       // updating array containing info on layout of widgets
    
    setLayout(prev => [
      ...prev,
      {
        i: newID,
        x: (prev.length * W) % COLS, 
        y: 0,
        w: w, 
        h: h,
        minW: min_w,
        minH: minh,
        maxW: max_w,
        maxH: max_h,
        static: false,
        resizeHandles: ['se']
      },
    ]);
  }

  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 onEditWidgets = () => {
    console.log("Start deleting widgets...");
    saveLayoutState(); // Save state before anything else
    setLayout(prevLayout =>
      prevLayout.map(item => ({
        ...item, 
        static: false
      }))
    );
    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;
  }


  const saveLayoutState = () => {
    if ( !isEditable ) {
      setOriginalLayout(layout);
      setOriginalWidgets(widgetArray);
    }
  };

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

  const onLayoutChange = (newLayout) => setLayout(newLayout);


  // Prop Forwarding
  const MyDashboardProps = { layout, onLayoutChange, isEditable, saveLayoutState, isDelete, DeleteWidget, widgetArray, appendWidget };
  const settingsButtonProps = { onEditWidgets, appendWidget };
  
  return (
    /* SUB HEADER */
    <Tabs.Root width="100%" height="100%" lazyMount variant="line">
      <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">
        {/* TABS */}
        {/* <CanvasHeaderTabs tabs={DASHBOARD_TABS} />*/} {/* TODO: rename to SubHeaderTabs */}
        <Tabs.List>
          {DASHBOARD_TABS.map(({ value, label }) =>
            <Tabs.Trigger key={value} value={value} fontSize="lg">
              { label }
            </Tabs.Trigger>
          )}
        </Tabs.List>

        {/* EDIT MODE BUTTONS */}
        <HStack width="258px" justifyContent="flex-end">
          {isEditable ? (
            <>
              <Button onClick={onSave} borderRadius="md" bg="primary" _hover={{bg: "primaryLt"}}>Save</Button>
              <Button onClick={onCancel} borderRadius="md">Cancel</Button>
              {isDelete ? (
                <DeleteAllButton onDeleteAll={ DeleteAll } />
              ):(null)
              }
            </>
          ):(
            <>
              <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
              <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>
  );
}