import Header from './Header/Header.jsx';
import Sidebar from './Sidebar/Sidebar.jsx';
import Canvas from './Canvas/Canvas.jsx';
import { Grid, GridItem, useRecipe, Dialog } from '@chakra-ui/react';
import { useState } from 'react';

export default function Dashboard() {
  const recipe = useRecipe({ key: "dashboard" });
  const styles = recipe();

  const [darkMode, setDarkMode] = useState(false);
  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 [view, setView] = useState("mydashboard");
  const [layout, setLayout] = useState([]);
  const [widgetArray, setWidgetArray] = useState([]);

  const beginEditIfNeeded = () => {
    if ( !isEditable ) {
      // Save deep copies to preserve state
      setOriginalLayout(structuredClone(layout));
      setOriginalWidgets(structuredClone(widgetArray));
      setIsEditable(true);
      setIsDelete(false);
    }
  };

  const onCancel = () => {
    console.log("canceling changes...");
    if (originalLayout.length) { 
      setLayout(originalLayout.map(item => ({
        ...item, 
        static: true
      })));
    };
    setWidgetArray(originalWidgets.length ? originalWidgets : []);
    setIsEditable(false);
    setIsDelete(false);
    setOriginalLayout([]); 
    setOriginalWidgets([]);
  }
  
  // Prevent navigation while in Edit mode without saving or cancelling
  const handleViewChange = (nextView) => { 
    if (view === "mydashboard" && isEditable) {
      const confirmed = window.confirm(
        "You have unsaved changes. Discard them and continue?"
      );
      if (!confirmed) return; 
      onCancel(); // Discards the layout
    }
    setView(nextView);
  };
  
  const onLayoutChange = (newLayout) => setLayout(newLayout);

  // Prop Forwarding
  const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, 
    onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, setOriginalWidgets, beginEditIfNeeded
  };
  const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode };
  const headerProps = { onChangeView: handleViewChange };
  
  return (
      <Grid css={styles}
        templateRows="1fr 11fr"
        // templateColumns="1fr 20fr"
        templateColumns="auto 1fr"
        height="100vh"
        width="100vw"
      >
        <GridItem rowSpan={1} colSpan={2}>
          <Header {...headerProps}/>
        </GridItem>
        <GridItem colSpan={1}>
          <Sidebar {...sidebarProps}/>
        </GridItem>
        <GridItem colSpan={1} width="100%" overflow="auto">
          <Canvas {...canvasProps}/>
        </GridItem>
      </Grid>
  );
}