| import React, { useState, useRef, useEffect } from 'react'; | 
| import { useTranslate } from "react-admin"; | 
| 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 { MAP_MODE } from "../constants"; | 
| import BatchSettings from './BatchSettings'; | 
| import BatchInsight from './BatchInsight'; | 
|   | 
| const Batch = (props) => { | 
|     const { open, onCancel, mode, batchSprites, width = PAGE_DRAWER_WIDTH } = props; | 
|     const theme = useTheme(); | 
|     const themeMode = theme.palette.mode; | 
|     const translate = useTranslate(); | 
|   | 
|     const handleClose = () => { | 
|         onCancel(); | 
|     } | 
|   | 
|     useEffect(() => { | 
|     }, []) | 
|   | 
|     return ( | 
|         <> | 
|             <Drawer | 
|                 variant="persistent" | 
|                 open={open} | 
|                 anchor="right" | 
|                 onClose={handleClose} | 
|                 sx={{ zIndex: 100, opacity: 1 }} | 
|             > | 
|                 {open && ( | 
|                     <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{ | 
|                     }}> | 
|                         <Stack direction="row" p={2}> | 
|                             <Typography variant="h6" flex="1"> | 
|                                 {batchSprites?.length || 0} {translate('common.action.selected')} | 
|                             </Typography> | 
|                             <IconButton onClick={handleClose} size="small"> | 
|                                 <CloseIcon /> | 
|                             </IconButton> | 
|                         </Stack> | 
|                         <Box p={3}> | 
|                             {mode === MAP_MODE.OBSERVER_MODE && ( | 
|                                 <> | 
|                                     <BatchInsight | 
|                                         batchSprites={batchSprites} | 
|                                         drawerClose={handleClose} | 
|                                     /> | 
|                                 </> | 
|                             )} | 
|   | 
|                             {mode === MAP_MODE.SETTINGS_MODE && ( | 
|                                 <> | 
|                                     <BatchSettings | 
|                                         batchSprites={batchSprites} | 
|                                         drawerClose={handleClose} | 
|                                     /> | 
|                                 </> | 
|                             )} | 
|                         </Box> | 
|                     </Box> | 
|                 )} | 
|             </Drawer> | 
|         </> | 
|     ) | 
| } | 
|   | 
| export default Batch; |