app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -3,8 +3,31 @@ import InputRange from "../../../ui/inputs/InputRange";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import { AI_Icon } from "../../../icons/ExportCommonIcons";
 import LabeledButton from "../../../ui/inputs/LabledButton";
+import {
+  useAzimuth,
+  useElevation,
+  useRenderDistance,
+  useResetCamera,
+  useRoofVisibility,
+  useSelectedWallItem,
+  useShadows,
+  useSocketStore,
+  useToggleView,
+  useWallVisibility,
+} from "../../../../store/store";
+import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
 
 const GlobalProperties: React.FC = () => {
+  const { toggleView, setToggleView } = useToggleView();
+  const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
+  const { roofVisibility, setRoofVisibility } = useRoofVisibility();
+  const { wallVisibility, setWallVisibility } = useWallVisibility();
+  const { shadows, setShadows } = useShadows();
+  const { resetCamera, setResetCamera } = useResetCamera();
+  const { elevation, setElevation } = useElevation();
+  const { azimuth, setAzimuth } = useAzimuth();
+  const { renderDistance, setRenderDistance } = useRenderDistance();
+  const { socket } = useSocketStore();
   const [limitDistance, setLimitDistance] = useState(false);
   const [distance, setDistance] = useState<number>(5);
 
@@ -23,6 +46,93 @@ const GlobalProperties: React.FC = () => {
   function updateGridDistance(value: number) {
     setGridDistance(value);
   }
+  // Function to toggle roof visibility
+  const changeRoofVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      !roofVisibility,
+      shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: wallVisibility,
+    //   roofVisibility: !roofVisibility,
+    //   shadowVisibility: shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setRoofVisibility(!roofVisibility); // Toggle roof visibility
+  };
+  // Function to toggle wall visibility
+  const changeWallVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      !wallVisibility,
+      roofVisibility,
+      shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: !wallVisibility,
+    //   roofVisibility: roofVisibility,
+    //   shadowVisibility: shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setWallVisibility(!wallVisibility); // Toggle wall visibility
+  };
+
+  const shadowVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      !shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: wallVisibility,
+    //   roofVisibility: roofVisibility,
+    //   shadowVisibility: !shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setShadows(!shadows);
+  };
+  const toggleResetCamera = () => {
+    if (!toggleView) {
+      setResetCamera(true); // Trigger reset camera action
+    }
+  };
 
   return (
     <div className="global-properties-container">
@@ -34,10 +144,29 @@ const GlobalProperties: React.FC = () => {
 
       <div className="split"></div>
 
-      <InputToggle inputKey="1" label="Roof Visibility" />
+      <InputToggle
-      <InputToggle inputKey="2" label="Wall Visibility" />
+        value={roofVisibility}
-      <InputToggle inputKey="3" label="Shadows Visibility" />
+        inputKey="1"
-      <LabeledButton label="Reset Camera" onClick={() => {}} value="Reset"/>
+        label="Roof Visibility"
+        onClick={changeRoofVisibility}
+      />
+      <InputToggle
+        value={wallVisibility}
+        inputKey="2"
+        label="Wall Visibility"
+        onClick={changeWallVisibility}
+      />
+      <InputToggle
+        value={shadows}
+        inputKey="3"
+        label="Shadows Visibility"
+        onClick={shadowVisibility}
+      />
+      <LabeledButton
+        label="Reset Camera"
+        onClick={toggleResetCamera}
+        value="Reset"
+      />
 
       <div className="split"></div>