import { Box, Button, Typography } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import {  showGalleryProps } from '../camera.types';

const ShowMobileGallery = ({
 setShowGallery,
 images,
 deleteImage,
 setImages,
 save,
}: showGalleryProps) => {
 return (
  <Box
   sx={{
    position: 'absolute',
    inset: 0,
    zIndex: 50,
    bgcolor: 'rgba(0,0,0,0.9)',
    backdropFilter: 'blur(6px)',
    display: 'flex',
    flexDirection: 'column',
    borderRadius: { sm: '2rem' },
   }}
  >
   <Box
    sx={{
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
     p: 2,
     borderBottom: '1px solid rgba(255,255,255,0.2)',
    }}
   >
    <Typography sx={{ color: 'white', fontSize: 18, fontWeight: 600 }}>
     {images.length} Photo{images.length !== 1 ? 's' : ''}
    </Typography>

    <Button
     type='button'
     variant='outlined'
     onClick={() => setShowGallery(false)}
     sx={{
      minWidth: 36,
      width: 36,
      height: 36,
      borderRadius: '50%',
      color: 'white',
      borderColor: 'rgba(255,255,255,0.4)',
      '&:hover': {
       bgcolor: 'rgba(255,255,255,0.2)',
       borderColor: 'rgba(255,255,255,0.6)',
      },
     }}
    >
     <CloseIcon fontSize='small' />
    </Button>
   </Box>

   <Box
    sx={{
     flex: 1,
     p: 2,
     overflowY: 'auto',
    }}
   >
    <Box
     sx={{
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gap: 2,
     }}
    >
     {images.map((image, index) => (
      <Box
       key={index}
       sx={{
        position: 'relative',
        '&:hover .delete-btn': {
         opacity: 1,
         pointerEvents: 'auto',
        },
       }}
      >
       <Box
        component='img'
        src={image.url}
        alt={`Photo ${index + 1}`}
        sx={{
         width: '100%',
         aspectRatio: '1',
         objectFit: 'cover',
         borderRadius: 2,
         border: '1px solid rgba(255,255,255,0.2)',
        }}
       />

       <CloseIcon
        onClick={() => deleteImage(index)}
        className='delete-btn'
        sx={{
         position: 'absolute',
         top: 4,
         right: 2,
         minWidth: 24,
         width: 24,
         height: 24,
         bgcolor: '#ef4444',
         color: 'white',
         borderRadius: '50%',
         p: 0,
         opacity: 0,
         pointerEvents: 'none',
         transition: 'opacity 0.2s ease-in-out',
         '&:hover': {
          bgcolor: '#dc2626',
         },
        }}
        fontSize='small'
       />

       <Box
        sx={{
         position: 'absolute',
         bottom: 8,
         left: 8,
         bgcolor: 'rgba(0,0,0,0.6)',
         color: 'white',
         fontSize: 12,
         px: 1,
         py: 0.5,
         borderRadius: 1,
        }}
       >
        {index + 1}
       </Box>
      </Box>
     ))}
    </Box>
   </Box>

   {/* Gallery Footer */}
   <Box
    sx={{
     p: 2,
     borderTop: '1px solid rgba(255,255,255,0.2)',
    }}
   >
    <Box sx={{ display: 'flex', gap: 2 }}>
     <Button
      type='button'
      variant='outlined'
      fullWidth
      color='error'
      onClick={() => setImages([])}
      disabled={images.length === 0}
 
     >
      Clear All
     </Button>

     <Button
      variant='contained'
      fullWidth
      disabled={images.length === 0}
      onClick={() => {
       setShowGallery(false);
       save();
      }}
     >
      Save All
     </Button>
    </Box>
   </Box>
  </Box>
 );
};

export default ShowMobileGallery;