From ea7a01b634d1ed63b54fac8367197776ee6b78e2 Mon Sep 17 00:00:00 2001
From: bhushan6 <bhushanwagh6@gmail.com>
Date: Sun, 13 Aug 2023 21:11:06 +0530
Subject: [PATCH] adds : bottom bar

---
 src/components/3D/LegoRoom.jsx         |  2 +
 src/components/UI/BottomBar/index.jsx  | 56 ++++++++++++++++++++++++++
 src/components/UI/BottomBar/styles.css | 39 ++++++++++++++++++
 3 files changed, 97 insertions(+)
 create mode 100644 src/components/UI/BottomBar/index.jsx
 create mode 100644 src/components/UI/BottomBar/styles.css

diff --git a/src/components/3D/LegoRoom.jsx b/src/components/3D/LegoRoom.jsx
index 7f9e279..3f88eb5 100644
--- a/src/components/3D/LegoRoom.jsx
+++ b/src/components/3D/LegoRoom.jsx
@@ -10,6 +10,7 @@ import { DialogBox } from "../UI";
 import { Perf } from "r3f-perf";
 import { ModeToggleBar } from "../UI/ModeToggleBar";
 import { Panel } from "../UI/Panel";
+import { BottomBar } from "../UI/BottomBar";
 
 export const LegoRoom = () => {
   return (
@@ -17,6 +18,7 @@ export const LegoRoom = () => {
       <DialogBox />
       <ModeToggleBar />
       <Panel />
+      <BottomBar />
       <Canvas
         gl={{
           alpha: false,
diff --git a/src/components/UI/BottomBar/index.jsx b/src/components/UI/BottomBar/index.jsx
new file mode 100644
index 0000000..7e678fb
--- /dev/null
+++ b/src/components/UI/BottomBar/index.jsx
@@ -0,0 +1,56 @@
+/* eslint-disable no-unused-vars */
+import React from "react";
+import { TrashIcon, ResetIcon } from "@radix-ui/react-icons";
+import "./styles.css";
+import { useStore } from "../../../store";
+// import { EDIT_MODE } from "../../../utils";
+
+export const BottomBar = () => {
+  const mode = useStore((state) => state.mode);
+
+  // const isEditMode = mode === EDIT_MODE;
+
+  const selectedBricks = useStore((state) => state.selectedBricks).map(
+    (sel) => sel.userData.uID
+  );
+  const setBricks = useStore((state) => state.setBricks);
+  const setSelection = useStore((state) => state.setSelectedBricks);
+
+  const deleteSelectedBricks = () => {
+    setBricks((bricks) => {
+      const newBricks = bricks.filter((brick) => {
+        const selectedClone = [...selectedBricks];
+        const uID = brick.uID;
+        let should = true;
+        for (let i = 0; i < selectedClone.length; i++) {
+          const selectedUID = selectedClone[i];
+          if (uID === selectedUID) {
+            should = false;
+            selectedClone.splice(i, 1);
+          }
+        }
+        return should;
+      });
+      return newBricks;
+    });
+    setSelection({});
+  };
+
+  return (
+    <div className="BottomBar">
+      <button className="Button violet">
+        <ResetIcon className="Icon" color="black" />
+      </button>
+      <button className="Button violet">
+        <ResetIcon
+          style={{ transform: "scaleX(-1)" }}
+          className="Icon"
+          color="black"
+        />
+      </button>
+      <button onClick={deleteSelectedBricks} className="Button violet">
+        <TrashIcon className="Icon" color="black" />
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/UI/BottomBar/styles.css b/src/components/UI/BottomBar/styles.css
new file mode 100644
index 0000000..7acfba6
--- /dev/null
+++ b/src/components/UI/BottomBar/styles.css
@@ -0,0 +1,39 @@
+@import "@radix-ui/colors/violet.css";
+
+button {
+  all: unset;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+}
+
+.BottomBar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  background-color: white;
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.Icon {
+  width: 30px;
+  height: 30px;
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.BottomBar .Button:hover .Icon {
+  background-color: var(--violet-5);
+}