|  |  | 
 |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
 |  |  | import { useTranslate } from "react-admin"; | 
 |  |  | import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, CardHeader, Divider } from '@mui/material'; | 
 |  |  | import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, Divider } from '@mui/material'; | 
 |  |  | import CloseIcon from '@mui/icons-material/Close'; | 
 |  |  | import { PAGE_DRAWER_WIDTH } from '@/config/setting'; | 
 |  |  | import MapSettings from './MapSettings'; | 
 |  |  | import ConfigSettings from './ConfigSettings'; | 
 |  |  |  | 
 |  |  | const Settings = (props) => { | 
 |  |  |     const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title } = props; | 
 |  |  |     const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title, setSpriteSettings } = props; | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const themeMode = theme.palette.mode; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     const [lastCopiedSprites, setLastCopiedSprites] = useState([]); | 
 |  |  |  | 
 |  |  |     const handleClose = () => { | 
 |  |  |         onCancel(); | 
 |  |  | 
 |  |  |     const handleTabChange = (event, newValue) => { | 
 |  |  |         setActiveTab(newValue); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         console.log(sprite); | 
 |  |  |  | 
 |  |  |     }, [sprite]) | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  | 
 |  |  |                         <Stack direction="row" p={2}> | 
 |  |  |                             <Typography variant="h6" flex="1"> | 
 |  |  |                                 {sprite | 
 |  |  |                                     ? 'No.' + sprite?.data?.uuid + '-' + sprite?.data?.type | 
 |  |  |                                     ? translate(`page.map.devices.${sprite?.data?.type?.toLowerCase()}`) + ' - ' + sprite?.data?.uuid | 
 |  |  |                                     : translate('page.map.settings.title')} | 
 |  |  |                             </Typography> | 
 |  |  |                             <IconButton onClick={handleClose} size="small"> | 
 |  |  | 
 |  |  |                         <Box p={3}> | 
 |  |  |                             <Card sx={{ | 
 |  |  |                                 transition: '0.3s', | 
 |  |  |                                 boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)', | 
 |  |  |                                 boxShadow: themeMode === 'light' | 
 |  |  |                                     ? '0px 2px 8px rgba(0, 0, 0, 0.1)' | 
 |  |  |                                     : '0px 2px 2px rgba(255, 255, 255, 0.1)', | 
 |  |  |                                 '&:hover': { | 
 |  |  |                                     boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.2)', | 
 |  |  |                                     boxShadow: themeMode === 'light' | 
 |  |  |                                         ? '0px 4px 16px rgba(0, 0, 0, 0.2)' | 
 |  |  |                                         : '0px 4px 8px rgba(255, 255, 255, 0.2)', | 
 |  |  |                                 }, | 
 |  |  |                                 borderRadius: '8px', | 
 |  |  |                             }}> | 
 |  |  | 
 |  |  |                                         {activeTab === 0 && ( | 
 |  |  |                                             <MapSettings | 
 |  |  |                                                 sprite={sprite} | 
 |  |  |                                                 setSpriteSettings={setSpriteSettings} | 
 |  |  |                                                 onSubmit={() => { | 
 |  |  |                                                     alert('MapSettings') | 
 |  |  |                                                 }} | 
 |  |  |                                                 width={width} | 
 |  |  |                                                 lastCopiedSprites={lastCopiedSprites} | 
 |  |  |                                                 setLastCopiedSprites={setLastCopiedSprites} | 
 |  |  |                                             /> | 
 |  |  |                                         )} | 
 |  |  |                                         {activeTab === 1 && ( | 
 |  |  |                                             <ConfigSettings | 
 |  |  |                                                 sprite={sprite} | 
 |  |  |                                                 onSubmit={() => { | 
 |  |  |                                                     alert('ConfigSettings') | 
 |  |  |                                                 }} | 
 |  |  |                                             /> | 
 |  |  |                                         )} | 
 |  |  | 
 |  |  |                 )} | 
 |  |  |             </Drawer> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const ConfigSettings = () => { | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <h1>ConfigSettings</h1> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  |