import React, { useState, useCallback, useEffect } from 'react';
import { useDropzone } from 'react-dropzone'
import ScaleLoader from "react-spinners/ScaleLoader";

export default function DropZone(props: any): JSX.Element {
  const {loadingFiles} = props;
  const [showLoadingBox, setShowLoadingBox] = useState<boolean>(true);

  useEffect(
    () => {
      if(!loadingFiles) {
        setTimeout(
          () => {
            setShowLoadingBox(false);
          },
          500
        )
      } else {
        setShowLoadingBox(true);
      }

    },
    [loadingFiles]
  )

  const onDrop = useCallback((acceptedFiles) => {
    // Do something with the files
    props.myOnDrop(acceptedFiles);
  }, []);
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop, accept: 'video/*'})

  return <div style={{position:'relative',cursor:'pointer',color:'#fff',background: isDragActive ? '#1976d2' : '#4791db',flex:'0 1 60px', display:'flex',justifyContent:'center',alignItems:'center',width:'100%'}}>
      {
        showLoadingBox && <div style={{position:'absolute', background: "#000",opacity:loadingFiles ? 0.5 : 0,left:0,right:0,top:0,bottom:0,height:60,transition:'opacity linear 500ms'}}>
          <div style={{display:'flex', justifyContent:'center',alignItems:'center',height:60}}>
            <ScaleLoader
              color={"#1976d2"}
              loading={true}
            />
          </div>
        </div>
      }
      <div style={{display:'flex',width:'100%',height:'100%',flex:1,justifyContent:'center',alignItems:'center',textAlign:'center'}} {...getRootProps()}>
          <input {...getInputProps()} />
          { isDragActive ? <p>Upuść pliki tutaj</p> : <p><i className="fas fa-plus"></i> Przeciągnij pliki tutaj lub kliknij, aby wybrać.</p> }
      </div>
    </div>

}
