import { useState } from 'react';
import { WebCamera } from '../WebCamera';
import {
 Box,
 Button,
 Dialog,
 DialogContent,
 DialogTitle,
 Typography,
} from '@mui/material';
import { useCameraController } from '../useCameraController';
import CameraOff from '@mui/icons-material/NoPhotography';
import { CameraAlt, FlipCameraAndroid } from '@mui/icons-material';
import CloseIcon from '@mui/icons-material/Close';
import SaveIcon from '@mui/icons-material/Save';

import ShowMobileGallery from './ShowMobileGallery';
import { CameraLayoutProps } from '../camera.types';

export function MobileLayout({
 images,
 open,
 setImages,
 setCropImageUrl,
 closeHandler,
 cropImageUrl,
 uischemaData,
 path,
}: CameraLayoutProps) {
 const [showGallery, setShowGallery] = useState(false);

 const {
  cameraRef,
  facingMode,
  cameraError,
  isSaving,
  captureImage,
  switchCamera,
  saveImage,
  setCameraError,
  deleteImage,
 } = useCameraController(
  setImages,
  uischemaData,
  path,
  images,
  setCropImageUrl,
  closeHandler,
 );

 const hasImages = images.length > 0;
 return (
  <Dialog open={open} fullScreen maxWidth='xl'>
   <DialogTitle sx={{ display: 'none' }} />

   <DialogContent
    sx={{
     p: 0,
     bgcolor: 'black',
     height: '100%',
     width: '100%',
    }}
   >
    <Box display='flex' flexDirection='column' height='100%'>
     <Box flex={1} position='relative' p={0.5}>
      {cameraError ? (
       <CameraMessage text='Camera not available' />
      ) : (
       !cropImageUrl && (
        <WebCamera
         ref={cameraRef}
         active={open}
         videoStyle={{ objectFit: 'contain' }}
         onError={() => setCameraError(true)}
        />
       )
      )}

      <Box
       position='absolute'
       bottom={32}
       left={0}
       right={0}
       px={3}
       display='flex'
       justifyContent='space-between'
       alignItems='center'
      >
       <Box
        width={64}
        height={64}
        border='2px solid rgba(255,255,255,0.3)'
        borderRadius={3}
        overflow='hidden'
        sx={{ cursor: hasImages ? 'pointer' : 'default' }}
        onClick={() => hasImages && setShowGallery(true)}
       >
        {hasImages && (
         <img
          src={images.at(-1)?.url}
          alt='Latest captured'
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
         />
        )}
       </Box>

       <Button
        onClick={captureImage}
        disabled={isSaving}
        sx={{
         width: 80,
         height: 80,
         bgcolor: 'white',
         borderRadius: '50%',
        }}
       >
        <CameraAlt sx={{ fontSize: 32, color: 'black' }} />
       </Button>

       <Button
        onClick={switchCamera}
        sx={{
         width: 64,
         height: 64,
         color: 'white',
         border: '1px solid rgba(255,255,255,0.3)',
         backdropFilter: 'blur(6px)',
        }}
       >
        <FlipCameraAndroid
         sx={{
          transform: facingMode === 'user' ? 'rotate(180deg)' : 'rotate(0deg)',
          transition: '0.3s',
         }}
        />
       </Button>
      </Box>
     </Box>

     <Box p={2} display='flex' gap={2}>
      <Button
       fullWidth
       variant='outlined'
       startIcon={<CloseIcon />}
       onClick={closeHandler}
       sx={{
        color: 'white',
        borderColor: 'rgba(255,255,255,0.3)',
       }}
      >
       Cancel
      </Button>

      <Button
       fullWidth
       variant='contained'
       onClick={saveImage}
       disabled={isSaving}
       startIcon={<SaveIcon />}
      >
       {isSaving ? 'Saving…' : `Save (${images.length})`}
      </Button>
     </Box>

     {showGallery && (
      <ShowMobileGallery
       images={images}
       setImages={setImages}
       setShowGallery={setShowGallery}
       deleteImage={deleteImage}
       save={saveImage}
      />
     )}
    </Box>
   </DialogContent>
  </Dialog>
 );
}

export function CameraMessage({ text }: { text: string }) {
 return (
  <Box
   height='100%'
   display='flex'
   flexDirection='column'
   alignItems='center'
   justifyContent='center'
   color='rgba(255,255,255,0.6)'
  >
   <CameraOff sx={{ fontSize: 48 }} />
   <Typography mt={2} textAlign='center'>
    {text}
   </Typography>
  </Box>
 );
}