import { Box, Button, CircularProgress, Typography } from '@mui/material';
import ImageIcon from '@mui/icons-material/Image';
import CloseIcon from '@mui/icons-material/Close';
import {  useCameraController } from '../useCameraController';
import { CameraLayoutProps, CapturedImage } from '../camera.types';

const ShowDesktopGallery = (props: CameraLayoutProps) => {
 const { images, closeHandler, uischemaData, setCropImageUrl, path, setImages } =
  props;
 const {
  isSaving,
  saveImage,
  deleteImage,
 } = useCameraController(
  setImages,
  uischemaData,
  path,
  images,
  setCropImageUrl,
  closeHandler,
 );
 return (
  <Box
   width={320}
   display='flex'
   flexDirection='column'
   bgcolor='white'
   borderLeft='1px solid #e2e8f0'
  >
   <Box p={2} borderBottom='1px solid #e2e8f0'>
    <Box display='flex' alignItems='center' gap={1}>
     <ImageIcon fontSize='small' />
     <Typography fontWeight={600}>Gallery</Typography>
     <Typography ml='auto' variant='body2'>
      {images?.length} images
     </Typography>
    </Box>
   </Box>

   <Box flex={1} p={2} overflow='auto'>
    {images?.length === 0 ? (
     <Box
      height='100%'
      display='flex'
      flexDirection='column'
      alignItems='center'
      justifyContent='center'
      color='text.secondary'
     >
      <ImageIcon fontSize='large' />
      <Typography>No images yet</Typography>
     </Box>
    ) : (
     <Box
      sx={{
       // border:"2px solid #cce2fee1",

       '&:hover .delete-btn': {
        opacity: 1,
        pointerEvents: 'auto',
        width: '100%',
       },
      }}
      display='grid'
      gridTemplateColumns={uischemaData.multiUpload && 'repeat(3, 1fr)'}
      gap={1.5}
     >
      {images?.map((img: CapturedImage, i) => (
       <Box
        key={i}
        position='relative'
        sx={{
         background: '#cce2fee1',

         padding: '2px',
        }}
       >
        <Box
         component='img'
         src={img.url}
         sx={{
          width: '100%',
          aspectRatio: '1',

          objectFit: 'cover',
          borderRadius: 1,
          border: '2px solid #cce2fee1',
         }}
        />
        <Button
         id='cancel'
         className='delete-btn'
         onClick={() => deleteImage(i)}
         title='Cancel'
         sx={{
          position: 'absolute',
          top: -4,
          right: -4,
          minWidth: 16,
          maxWidth: 16,
          opacity: 0,
          width: 16,
          height: 16,
          bgcolor: '#f24355',
          color: 'white',
          borderRadius: '50%',
         }}
        >
         <CloseIcon sx={{ fontSize: '8px', width: '10px' }} fontSize='small' />
        </Button>
       </Box>
      ))}
     </Box>
    )}
   </Box>
   <Box p={2} borderTop='1px solid #e2e8f0' display='flex' gap={1}>
    <Button variant='outlined' fullWidth onClick={closeHandler} disabled={isSaving}>
     Cancel
    </Button>
    <Button
     variant='contained'
     fullWidth
     disabled={isSaving}
     onClick={saveImage}
    >
     {isSaving ? (
      <>
       <CircularProgress size={16} sx={{ mr: 1 }} />
       Saving…
      </>
     ) : (
      `Save (${images?.length})`
     )}
    </Button>
   </Box>
  </Box>
 );
};

export default ShowDesktopGallery;