From 6485ede5f8e69e2e8736e6d1eaf4285223001116 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Fri, 20 Jan 2023 12:08:46 +0100
Subject: [PATCH] refactor(web/menu): planet menu data passing

---
 web/src/features/menu/planet/index.tsx | 170 +++++++++++++++++--------
 1 file changed, 119 insertions(+), 51 deletions(-)

diff --git a/web/src/features/menu/planet/index.tsx b/web/src/features/menu/planet/index.tsx
index a767fa0d1..ef3fc0992 100644
--- a/web/src/features/menu/planet/index.tsx
+++ b/web/src/features/menu/planet/index.tsx
@@ -1,6 +1,10 @@
-import { ActionIcon, Box, Tooltip } from '@mantine/core';
+import { ActionIcon, Box, Stack, Text, Transition } from '@mantine/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { useState } from 'react';
+import { useNuiEvent } from '../../../hooks/useNuiEvent';
+import { debugData } from '../../../utils/debugData';
+import { fetchNui } from '../../../utils/fetchNui';
 
 const radius = 60;
 
@@ -14,67 +18,131 @@ function getTransform(index: number, totalItems: number) {
   return `translate(${x}px, ${y}px)`;
 }
 
-const items: { icon: IconProp; label: string }[] = [
-  { icon: 'handcuffs', label: 'Arrest' },
-  { icon: 'warehouse', label: 'Garage' },
-  { icon: 'heart', label: 'Info' },
-  { icon: 'handcuffs', label: 'Arrest' },
-  { icon: 'warehouse', label: 'Garage' },
-  { icon: 'heart', label: 'Info' },
-];
+interface MenuItem {
+  icon: IconProp;
+  label: string;
+}
+
+debugData<{ items: MenuItem[]; sub?: boolean }>([
+  {
+    action: 'openPlanetMenu',
+    data: {
+      items: [
+        { icon: 'palette', label: 'Paint' },
+        { icon: 'warehouse', label: 'Garage' },
+        { icon: 'handcuffs', label: 'Arrest' },
+      ],
+      sub: false,
+    },
+  },
+]);
 
 const PlanetMenu: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [menu, setMenu] = useState<{ items: MenuItem[]; sub?: boolean }>({
+    items: [],
+    sub: false,
+  });
+  const [currentItem, setCurrentItem] = useState({ label: '', visible: false });
+
+  useNuiEvent('openPlanetMenu', (data: { items: MenuItem[]; sub?: boolean }) => {
+    setMenu(data);
+    setVisible(true);
+  });
+
+  const handleItemClick = (index: number) => {
+    // fetchNui('planetClick', index)
+    // setVisible(false);
+  };
+
   return (
-    <Box
-      style={{
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-      }}
-    >
-      <ActionIcon variant="filled" radius="xl" size="xl" color="primary" sx={{ zIndex: 99 }} w={50} h={50}>
-        <FontAwesomeIcon fixedWidth icon="xmark" size="lg" />
-      </ActionIcon>
+    <>
       <Box
-        sx={{
+        style={{
           position: 'absolute',
           top: '50%',
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          width: 120,
-          height: 120,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
         }}
       >
-        {items.map((item, index) => (
-          <Box
-            sx={(theme) => ({
-              transform: getTransform(index, items.length),
-              position: 'absolute',
-              width: 40,
-              height: 40,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: '50%',
-              backgroundColor: theme.colors.dark[6],
-              color: theme.colors.dark[0],
-              boxShadow: theme.shadows.sm,
-              padding: 12,
-              '&:hover': {
-                backgroundColor: theme.colors.dark[5],
-                cursor: 'pointer',
-              },
-            })}
-          >
-            <FontAwesomeIcon icon={item.icon} fixedWidth />
-          </Box>
-        ))}
+        <>
+          {visible && (
+            <>
+              <ActionIcon variant="filled" radius="xl" size="xl" color="primary" sx={{ zIndex: 99 }} w={50} h={50}>
+                <FontAwesomeIcon fixedWidth icon="xmark" size="lg" />
+              </ActionIcon>
+              <Box
+                sx={{
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  width: 120,
+                  height: 120,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                {menu.items.map((item, index) => (
+                  <Box
+                    onMouseEnter={() => setCurrentItem({ label: item.label, visible: true })}
+                    onMouseLeave={() => setCurrentItem((prevState) => ({ ...prevState, visible: false }))}
+                    onClick={() => handleItemClick(index)}
+                    sx={(theme) => ({
+                      transform: getTransform(index, menu.items.length),
+                      position: 'absolute',
+                      width: 40,
+                      height: 40,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: '50%',
+                      backgroundColor: theme.colors.dark[6],
+                      color: theme.colors.dark[0],
+                      boxShadow: theme.shadows.sm,
+                      padding: 12,
+                      '&:hover': {
+                        backgroundColor: theme.colors.dark[5],
+                        cursor: 'pointer',
+                      },
+                    })}
+                  >
+                    <FontAwesomeIcon icon={item.icon} fixedWidth />
+                  </Box>
+                ))}
+              </Box>
+            </>
+          )}
+        </>
       </Box>
-    </Box>
+      <Stack
+        sx={{ position: 'absolute', width: '100%', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
+        mt={120}
+        justify="center"
+        align="center"
+      >
+        <Transition transition="fade" mounted={currentItem.visible}>
+          {(styles) => (
+            <Box
+              style={styles}
+              sx={(theme) => ({
+                backgroundColor: theme.colors.dark[6],
+                color: theme.colors.dark[2],
+                padding: 8,
+                borderRadius: theme.radius.sm,
+                fontWeight: 500,
+                fontSize: 14,
+                boxShadow: theme.shadows.sm,
+                textAlign: 'center',
+              })}
+            >
+              <Text>{currentItem.label}</Text>
+            </Box>
+          )}
+        </Transition>
+      </Stack>
+    </>
   );
 };