import { useDropzone } from 'react-dropzone';
import React, { useEffect, useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from './rootReducer';
import { addCommentFile, closeUploadDialog } from '../share/aufgaben-shared/slices/commentsSlice';
import { Trans } from '@lingui/macro';
import styled from 'styled-components';

const StyledDropZone = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-width: 2px;
  border-radius: 2px;
  border-color: #eeeeee;
  border-style: dashed;
  background-color: #fafafa;
  color: #bdbdbd;
  outline: none;
  transition: border 0.24s ease-in-out;
`;

function CommentFileDropzone() {
  const open = useSelector((s: RootState) => s.comments.isUploadDialogOpen);
  const ergID = useSelector((s: RootState) => s.comments.uploadErgID);
  const [filesToUpload, setFilesToUpload] = useState([]);
  const d = useDispatch();
  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

  useEffect(
    function prepareUpload() {
      if (acceptedFiles.length === 0) return;

      setFilesToUpload(acceptedFiles);
    },
    [acceptedFiles]
  );

  useEffect(
    function uploadFile() {
      if (filesToUpload.length === 0) return;

      for (let f of acceptedFiles) {
        d(addCommentFile({ ergID, file: f }));
      }
      d(closeUploadDialog());
      setFilesToUpload([]);
    },
    [acceptedFiles, d, ergID, filesToUpload.length]
  );

  const handleClose = () => {
    d(closeUploadDialog());
  };

  return (
    <Dialog open={open}>
      <DialogContent>
        <StyledDropZone>
          <div {...getRootProps({ className: 'dropzone' })}>
            <input {...getInputProps()} />
            <p>
              Dateien zum Hochladen in dieses Feld ziehen!
              <br />
              Oder zum Auswählen einer Datei klicken.
            </p>
          </div>
          <aside>
            <h4>Files</h4>
          </aside>
        </StyledDropZone>
      </DialogContent>

      <DialogActions>
        <Button color='secondary' onClick={handleClose}>
          <Trans>Close</Trans>
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default CommentFileDropzone;