import { Box, Button, Typography } from '@mui/material';
import CameraAltIcon from '@mui/icons-material/CameraAlt';
import LoopIcon from '@mui/icons-material/Loop';
import {
 useCameraController,
} from '../useCameraController';
import {
 Dialog,
 DialogContent,
 DialogTitle,
 CircularProgress,
} from '@mui/material';
import { WebCamera } from '../WebCamera';
import ShowDesktopGallery from './ShowDesktopGallery';
import { useTheme } from '@mui/system';
import { CameraMessage } from '../Mobile/MobileLayout';
import { CameraLayoutProps } from '../camera.types';


export function DesktopLayout(props: CameraLayoutProps) {
 const {
  images,
  open,
  setImages,
  uischemaData,
  setCropImageUrl,
  path,
  cropImageUrl,
  closeHandler
 } = props;
 const {
  cameraRef,
  facingMode,
  cameraError,
  isSaving,
  captureImage,
  switchCamera,
  setCameraError,
 } = useCameraController(
  setImages,
  uischemaData,
  path,
  images,
  setCropImageUrl,
  closeHandler
 );
 const theme = useTheme();
 return (
  <Dialog open={open} maxWidth='xl' fullScreen fullWidth>
   <DialogTitle sx={{ display: 'none' }} />
   <DialogContent
    sx={{
     p: 0,
     height: '90vh',
     bgcolor: 'rgba(15,23,42,0.95)',
     backdropFilter: 'blur(8px)',
     overflow: 'hidden',
    }}
   >
    <Box display='flex' height='100%'>
     <Box flex={1} position='relative' bgcolor='black'>
      {cameraError ? (
       <CameraMessage text='Camera not available' />
      ) : (
       !cropImageUrl && (
        <WebCamera
         ref={cameraRef}
         active={open}
         videoStyle={{ objectFit: 'contain' }}
         onError={() => setCameraError(true)}
        />
       )
      )}
      <Box
       position='absolute'
       bottom={16}
       width='100%'
       display='flex'
       justifyContent='center'
       gap={2}
      >
       <Button
        onClick={captureImage}
        sx={{
         width: 64,
         height: 64,
         bgcolor: 'white',
         borderRadius: '50%',
         '&:hover': { bgcolor: '#f1f5f9' },
        }}
       >
        <CameraAltIcon />
       </Button>

       <Button
        onClick={switchCamera}
        sx={{
         width: 64,
         borderRadius: '50%',
         height: 64,
         bgcolor: 'white',
         border: '1px solid #e2e8f0',
        }}
       >
        <LoopIcon
         sx={{
          transform: facingMode === 'user' ? 'rotate(180deg)' : 'rotate(0deg)',
          transition: '0.3s',
         }}
        />
       </Button>
      </Box>
     </Box>
     <ShowDesktopGallery {...props} />
     {isSaving && (
      <Box
       sx={{
        position: 'absolute',
        inset: 0,
        bgcolor: theme.palette.background.primary,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 10,
       }}
      >
       <Box
        bgcolor='white'
        p={4}
        borderRadius={3}
        display='flex'
        flexDirection='column'
        alignItems='center'
        gap={2}
       >
        <CircularProgress size={36} />
        <Typography fontWeight={600}>Saving images…</Typography>
       </Box>
      </Box>
     )}
    </Box>
   </DialogContent>
  </Dialog>
 );
}