import React, { Dispatch, FunctionComponent, useCallback, useState } from 'react';

import { useDropzone } from 'react-dropzone';
import { Box, Stack, Typography } from '@mui/material';
import BlockContent from './upload/BlockContent';
import { styled } from '@mui/material/styles';
import { UploadIllustration } from '../assets';
import Iconify from './Iconify';

const RootStyle = styled('div')(({ theme }) => ({
  width: 144,
  height: 144,
  margin: 'auto',
  borderRadius: '50%',
  padding: theme.spacing(1),
  border: `2px dashed ${theme.palette.grey[500_32]}`,
}));
const DropZoneStyle = styled('div')({
  zIndex: 0,
  width: '100%',
  height: '100%',
  outline: 'none',
  display: 'flex',
  overflow: 'hidden',
  borderRadius: '50%',
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'center',
  '& > *': { width: '100%', height: '100%' },
  '&:hover': {
    cursor: 'pointer',
    '& .placeholder': {
      zIndex: 9,
    },
  },
});

const PlaceholderStyle = styled('div')(({ theme }) => ({
  display: 'flex',
  position: 'absolute',
  alignItems: 'center',
  flexDirection: 'column',
  justifyContent: 'center',
  color: theme.palette.text.secondary,
  // backgroundColor: theme.palette.background.neutral,
  transition: theme.transitions.create('opacity', {
    easing: theme.transitions.easing.easeInOut,
    duration: theme.transitions.duration.shorter,
  }),
  '&:hover': { opacity: 0.72 },
}));

const UploadImage: FunctionComponent<{
  setFile: Dispatch<any>;
  currentImage: string;
}> = ({ setFile, currentImage, setSave, error, file, helperText, sx, ...other }) => {
  const onDrop = useCallback(
    (acceptedFiles) => {
      // Do something with the files
      console.log(acceptedFiles);
      setFile(acceptedFiles[0]);
      setImage(acceptedFiles[0]);
    },
    [setFile, setSave]
  );

  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
    onDrop,
    multiple: false,
  });

  const [image, setImage] = useState<File | null>(null);

  return (
    <RootStyle
      sx={{
        ...((isDragReject || error) && {
          borderColor: 'error.light',
        }),
        ...sx,
      }}
    >
      <DropZoneStyle
        {...getRootProps()}
        sx={{
          ...(isDragActive && { opacity: 2.72 }),
        }}
      >
        <input {...getInputProps()} />
        {/* <Stack
        spacing={2}
        alignItems="center"
        justifyContent="center"
        direction={{ xs: 'column', md: 'row' }}
        sx={{ width: 1, textAlign: { xs: 'center', md: 'left' } }}
      > */}
        {image ? (
          <img src={URL.createObjectURL(image)} alt="preview" width={220} />
        ) : currentImage ? (
          <img src={currentImage} alt="preview" width={220} />
        ) : (
          <PlaceholderStyle
            className="placeholder"
            sx={{
              ...((isDragReject || error) && {
                bgcolor: 'error.lighter',
              }),
            }}
          >
            <Iconify icon={'ic:round-add-a-photo'} sx={{ width: 24, height: 24, mb: 1 }} />
            <Typography variant="caption">{image ? 'Update photo' : 'Upload photo'}</Typography>
          </PlaceholderStyle>
        )}

        <PlaceholderStyle className="placeholder">
          <Iconify icon={'ic:round-add-a-photo'} sx={{ width: 24, height: 24, mb: 1 }} />
          <Typography variant="caption">{image ? 'Update photo' : 'Upload photo'}</Typography>
        </PlaceholderStyle>
        {/* </Stack> */}
        {/* <BlockContent file={image} /> */}

        {isDragReject && <p>Unsupported file type...</p>}
      </DropZoneStyle>
    </RootStyle>
  );
};

export default UploadImage;