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';

const DropZoneStyle = styled('div')(({ theme }) => ({
  outline: 'none',
  overflow: 'hidden',
  position: 'relative',
  padding: theme.spacing(5, 1),
  borderRadius: theme.shape.borderRadius,
  transition: theme.transitions.create('padding'),
  // backgroundColor: theme.palette.background.neutral,
  backgroundColor: '#ffffff',

  border: `2px dashed ${theme.palette.grey[500_32]}`,
  '&:hover': { cursor: 'pointer', backgroundColor: '#f7f7f7' },
}));

const MyDropzone: FunctionComponent<{
  setFile: Dispatch<any>;
  currentImage: string;
}> = ({
  setFile,
  currentImage,

  // onChanges,
}) => {
  const onDrop = useCallback((acceptedFiles) => {
    // Do something with the files
    console.log(acceptedFiles);
    setFile(acceptedFiles[0]);
    setImage(acceptedFiles[0]);
    // onChanges(acceptedFiles[0]);
  }, []);

  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
    onDrop,
    multiple: false,
  });
  const [image, setImage] = useState<File | null>(null);
  return (
    <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} />
        ) : (
          <UploadIllustration sx={{ width: 220 }} />
        )}

        <Box sx={{ p: 3 }}>
          <Typography gutterBottom variant="h5">
            Pilih Foto
          </Typography>

          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            Letakkan foto disini atau klik jelajahi &nbsp;
            <Typography
              variant="body2"
              component="span"
              sx={{ color: 'primary.main', textDecoration: 'underline' }}
            >
              jelajahi
            </Typography>
            &nbsp;foto di perangkat Anda
          </Typography>
        </Box>
      </Stack>
      {/* <BlockContent file={image} /> */}

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

export default MyDropzone;