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

import { useState } from "react";
import { HStack, Flex, Tabs, Box } 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 { Deformation } from "./HomeTabs/Deformation";
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";
import { WIDGET_REGISTRY } from "@/constants/widgetRegistry";
import { WIDGET_INSPECTOR_REGISTRY } from "@/constants/widgetInspectorRegistry";
import WidgetInspector from "../CanvasComponents/WidgetInspector";

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

  const [inspectorOpen, setInspectorOpen] = useState(false);
  const [inspectorTarget, setInspectorTarget] = useState(null);

  const openInspector = ({ id, widgetKey }) => {
    setInspectorTarget({ id, widgetKey, view });
    setInspectorOpen(true);
  };

  function appendWidget(widgetKey, overrides = {}) {
    beginEditIfNeeded(); // Save state before anything else
    // Place canvas in edit mode upon adding a new widget 
    setIsEditable(true);
    setIsDelete(true);

    const def = WIDGET_REGISTRY[widgetKey];
    if(!def) { 
      console.warn("appendWidget: unknown widgetKey:", widgetKey);
      return;
    };

    // Widget Inspector Configuration Settings
    const inspectorDef = WIDGET_INSPECTOR_REGISTRY[widgetKey];
    const defaultConfig = inspectorDef?.defaultConfig ?? {};

    const newID = uuid();      // could be replaced with something else like guid
    const COLS = 16;

    if (widgetKey === "gas_measurements") {
      setInspectorTarget({ view, id: newID, widgetKey });
      setInspectorOpen(true);
    }
    
    const {
      w = def.defaults.w,
      h = def.defaults.h,
      minW = def.defaults.minW,
      minH = def.defaults.minH,
      maxW = def.defaults.maxW,
      maxH = def.defaults.maxH, 
    } = overrides; 

    // DEBUG
    console.log("after add:", { widgetKey, layoutLen: layout.length, widgetLen: widgetArray.length });

    // IMPORTANT: use functional updates so you don't rely on stale widgetArray/layout
    setWidgetArray(prev => [
      ...prev,
      { 
        i: newID, 
        widgetKey, 
        // config: JSON.parse(JSON.stringify(defaultConfig)), // Can use this if Safari complains
        config: structuredClone(defaultConfig)
      },
    ]);

    setLayout(prev => [
      ...prev,
      {
        i: newID,
        x: (prev.length * w) % COLS, 
        y: 0,
        w, 
        h,
        minW,
        minH,
        maxW,
        maxH,
        static: false,
        resizeHandles: ['se']
      },
    ]);
  }

  function updateWidgetConfig(id, patchOrFn) {
    setWidgetArray(prev =>
      prev.map(w => {
        if (w.i !== id) return w;

        const nextConfig =
          typeof patchOrFn === "function"
          ? patchOrFn(w.config ?? {})
          : {...(w.config ?? {}), ...(patchOrFn ?? {}) };

        return { ...w, config: nextConfig };
      })
    );
  }

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

  const onEditWidgets = () => {
    console.log("Start deleting widgets...");
    beginEditIfNeeded(); // 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;
  }

  // Prop Forwarding
  const MyDashboardProps = { view, layout, onLayoutChange, isEditable, 
    beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, appendWidget, 
    openInspector 
  };
  const settingsButtonProps = { view, onEditWidgets, 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"
        pl={5}
        pr={2}
				pt={3}
        pb={2}
				align="center"
				justify="space-between"
        width="100%"
      >
        <CanvasHeaderTabs tabs={DASHBOARD_TABS} />
        <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">
        <Flex height="100%" width="100%" gap="3">
          <Box flex="1" minW="0">
            <MyDashboard {...MyDashboardProps}/>
          </Box>

          {inspectorOpen && inspectorTarget && (
            <WidgetInspector
              open={inspectorOpen}
              onClose={() => setInspectorOpen(false)}
              target={inspectorTarget}
              widgetArray={widgetArray}
              updateWidgetConfig={updateWidgetConfig}
            />
          )}
        </Flex>
      </Tabs.Content>
      
      <Tabs.Content value="gas">
        <MyDashboard {...MyDashboardProps}/>
      </Tabs.Content>
      <Tabs.Content value="seismic">
        <Seismic />
      </Tabs.Content>
      <Tabs.Content value="remote">
        <RemoteSensing />
      </Tabs.Content>
      <Tabs.Content value="daily">
        <DailyActivity />
      </Tabs.Content>
      <Tabs.Content value="deformation">
        <Deformation />
      </Tabs.Content>
    </Tabs.Root>
  );
}