From 5845b610eaae74a57cfd18a6ae24a95d56ee5a2c Mon Sep 17 00:00:00 2001
From: Yeon Vinzenz Varapragasam <YeonVinzenz.Varapragasam@trustedshops.de>
Date: Fri, 18 Aug 2023 02:55:39 +0200
Subject: [PATCH] 2d

---
 src/pages/Devices/EditVirtuals/EditMatrix.tsx | 270 +++++++++++++++---
 1 file changed, 232 insertions(+), 38 deletions(-)

diff --git a/src/pages/Devices/EditVirtuals/EditMatrix.tsx b/src/pages/Devices/EditVirtuals/EditMatrix.tsx
index a3e42376..c7ed9f29 100644
--- a/src/pages/Devices/EditVirtuals/EditMatrix.tsx
+++ b/src/pages/Devices/EditVirtuals/EditMatrix.tsx
@@ -1,23 +1,56 @@
 import {
   Box,
+  Button,
   Dialog,
+  DialogActions,
   DialogContent,
+  DialogTitle,
   MenuItem,
   Select,
-  Slider
+  Slider,
+  Switch,
+  Typography
 } from '@mui/material'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
 import useStore from '../../../store/useStore'
+import BladeFrame from '../../../components/SchemaForm/components/BladeFrame'
 
 const EditMatrix = () => {
   const devices = useStore((state) => state.devices)
 
   const [rowNumber, setRowNumber] = useState(10)
   const [colNumber, setColNumber] = useState(5)
+  const [currentCell, setCurrentCell] = useState([-1, -1])
+  const [open, setOpen] = useState(false)
+  const [group, setGroup] = useState(false)
+  const [selectedPixel, setSelectedPixel] = useState<number | number[]>(0)
+  const [currentDevice, setCurrentDevice] = useState('')
+  const [matrix, setMatrix] = useState(
+    Array(rowNumber * colNumber).fill({
+      deviceId: '',
+      pixel: 0
+    })
+  )
   //   const [width, setWidth] = useState(500)
   //   const [height, setHeight] = useState(500)
-  const [open, setOpen] = useState(false)
+
+  const closeClear = () => {
+    setOpen(false)
+    setCurrentDevice('')
+    setSelectedPixel(0)
+  }
+  const deviceRef = useRef()
+
+  useEffect(() => {
+    if (group) {
+      if (typeof selectedPixel === 'number') {
+        setSelectedPixel([selectedPixel, selectedPixel + 1])
+      }
+    } else if (typeof selectedPixel !== 'number') {
+      setSelectedPixel(selectedPixel[0])
+    }
+  }, [group])
 
   return (
     <div
@@ -49,7 +82,12 @@ const EditMatrix = () => {
             ? 1
             : 0.1
         }
-        minScale={false ? 1 : 0.1}
+        minScale={
+          colNumber * 100 < window.innerWidth ||
+          rowNumber * 100 < window.innerHeight * 0.8
+            ? 1
+            : 0.1
+        }
       >
         <TransformComponent>
           <div
@@ -70,43 +108,199 @@ const EditMatrix = () => {
                 width: '100%'
               }}
             >
-              {Array(rowNumber * colNumber)
-                .fill('a')
-                .map((d, i) => (
-                  <Box
-                    key={i}
-                    onContextMenu={(e) => {
-                      e.preventDefault()
-                      setOpen(true)
-                    }}
-                    sx={{
-                      cursor: 'copy',
-                      border: '1px solid #fff',
-                      background: '#333',
-                      width: 100,
-                      height: 100,
-                      '&:hover': {
-                        background: '#999'
-                      }
-                      //   width: `min(${width / colNumber}px, ${
-                      //     height / rowNumber
-                      //   }px)`,
-                      //   height: `min(${width / colNumber}px, ${
-                      //     height / rowNumber
-                      //   }px)`
-                    }}
-                  />
-                ))}
+              {matrix.map((d, i) => (
+                <Box
+                  key={i}
+                  onContextMenu={(e) => {
+                    e.preventDefault()
+                    setCurrentCell([i % colNumber, Math.floor(i / colNumber)])
+                    setOpen(true)
+                  }}
+                  sx={{
+                    cursor: 'copy',
+                    border: '1px solid #666',
+                    background: '#111',
+                    width: 100,
+                    height: 100,
+                    '&:hover': {
+                      background: '#999'
+                    }
+                    //   width: `min(${width / colNumber}px, ${
+                    //     height / rowNumber
+                    //   }px)`,
+                    //   height: `min(${width / colNumber}px, ${
+                    //     height / rowNumber
+                    //   }px)`
+                  }}
+                >
+                  {d.deviceId !== '' && (
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        height: '98px',
+                        background: '#444',
+                        width: '98px',
+                        border: '5px solid #111',
+                        boxSizing: 'border-box',
+                        padding: '8px',
+                        borderRadius: '10px'
+                      }}
+                    >
+                      <Typography variant="caption">
+                        {devices[d.deviceId].config.name}
+                      </Typography>
+                      <Typography variant="caption">{d.pixel}</Typography>
+                    </div>
+                  )}
+                </Box>
+              ))}
             </div>
-            <Dialog onClose={() => setOpen(false)} open={open}>
+            <Dialog
+              onClose={() => closeClear()}
+              open={open}
+              PaperProps={{ sx: { width: '100%', maxWidth: 320 } }}
+            >
+              <DialogTitle>
+                <div
+                  style={{
+                    display: 'flex',
+                    width: '100%',
+                    justifyContent: 'space-between'
+                  }}
+                >
+                  Assign Pixel
+                  <Typography variant="caption" align="right">
+                    Row: {currentCell[1] + 1}
+                    <br />
+                    Column: {currentCell[0] + 1}
+                  </Typography>
+                </div>
+              </DialogTitle>
               <DialogContent>
-                <Select>
-                  {devices &&
-                    Object.keys(devices).map((d: any, i: number) => (
-                      <MenuItem key={i}>{devices[d].config.name}</MenuItem>
-                    ))}
-                </Select>
+                <BladeFrame
+                  title="Device"
+                  full={false}
+                  style={{ marginBottom: '1rem' }}
+                >
+                  <Select
+                    value={currentDevice}
+                    onChange={(e) => setCurrentDevice(e.target.value || '')}
+                    inputRef={deviceRef}
+                    variant="standard"
+                    fullWidth
+                  >
+                    {devices &&
+                      Object.keys(devices).map((d: any, i: number) => (
+                        <MenuItem value={devices[d].id} key={i}>
+                          {devices[d].config.name}
+                        </MenuItem>
+                      ))}
+                  </Select>
+                </BladeFrame>
+                {currentDevice && (
+                  <>
+                    <BladeFrame
+                      title={`Pixel${group ? 's' : ''}`}
+                      full={false}
+                      style={{ marginBottom: '1rem' }}
+                    >
+                      <Slider
+                        marks={[
+                          { value: 0, label: '0' },
+                          {
+                            value: devices[currentDevice].config.pixel_count,
+                            label: devices[currentDevice].config.pixel_count
+                          }
+                        ]}
+                        valueLabelDisplay="auto"
+                        min={0}
+                        max={devices[currentDevice].config.pixel_count}
+                        value={selectedPixel}
+                        onChange={(e, newPixel) => setSelectedPixel(newPixel)}
+                      />
+                    </BladeFrame>
+                    <BladeFrame
+                      title="Group"
+                      style={{
+                        justifyContent: 'space-between',
+                        paddingRight: 2,
+                        marginBottom: '1rem'
+                      }}
+                    >
+                      <Typography>Assign multiple</Typography>
+                      <Switch
+                        checked={group}
+                        onClick={() => setGroup(!group)}
+                      />
+                    </BladeFrame>
+                    {group && (
+                      <>
+                        <BladeFrame
+                          title="Mode"
+                          full={false}
+                          style={{ marginBottom: '1rem' }}
+                        >
+                          <Select
+                            disabled
+                            defaultValue="linear"
+                            variant="standard"
+                            fullWidth
+                          >
+                            <MenuItem value="linear">Linear</MenuItem>
+                          </Select>
+                        </BladeFrame>
+                        <BladeFrame
+                          title="Fill Direction"
+                          full={false}
+                          style={{ marginBottom: '1rem' }}
+                        >
+                          <Select
+                            disabled
+                            defaultValue="right"
+                            variant="standard"
+                            fullWidth
+                          >
+                            <MenuItem value="right">To Right</MenuItem>
+                          </Select>
+                        </BladeFrame>
+                      </>
+                    )}
+                  </>
+                )}
               </DialogContent>
+              <DialogActions>
+                <Button
+                  onClick={() => {
+                    const updatedMatrix = [...matrix]
+                    const [col, row] = currentCell
+                    if (typeof selectedPixel === 'number') {
+                      updatedMatrix[row * colNumber + col] = {
+                        deviceId: currentDevice,
+                        pixel: selectedPixel
+                      }
+                    } else {
+                      for (
+                        let index = 0;
+                        index < selectedPixel[1] - selectedPixel[0];
+                        // eslint-disable-next-line no-plusplus
+                        index++
+                      ) {
+                        updatedMatrix[row * colNumber + col + index] = {
+                          deviceId: currentDevice,
+                          pixel: selectedPixel[0] + index
+                        }
+                      }
+                    }
+                    setMatrix(updatedMatrix)
+                    closeClear()
+                  }}
+                >
+                  Save
+                </Button>
+              </DialogActions>
             </Dialog>
           </div>
         </TransformComponent>