import { useState } from "react";
import { Link } from "react-router-dom";
import {upload as ApiUpload} from "../services/PhpApi";
import PreviewUpload from "./PreviewUpload";
import './InputForm.css';
import { notificationError, notificationSuccess } from "../services/Notifications";

const FileUpload: React.FC = () => 
{
  const [currentFile, setCurrentFile] = useState<File>();
  const [progress, setProgress] = useState(0);

  
  const selectFile = (pl: File) => 
  {
    setCurrentFile(pl);
    setProgress(0);
  };

  const upload = () => 
  {
    setProgress(0);
    if (!currentFile) return;

    ApiUpload(currentFile, '', (event: any) => 
	{
		setProgress(Math.round((100 * event.loaded) / event.total));
    })
	.then((response) => 
	{
		notificationSuccess(response.data.message);
		return;
	})
	.catch((err) => 
	{
		setProgress(0);

		if (err.response && err.response.data && err.response.data.message) 
		{
			notificationError(err.response.data.message);
		} 
		else 
		{
			notificationError("Could not upload the File!");
		}

		setCurrentFile(undefined);
	});
  };



  return (
  <div>
	<div className="row InputForm">
	  <div className="col-8">
	    <PreviewUpload chgFile={selectFile} />
	  </div>
	  <div>
		<button
		  //className="btn btn-success btn-sm"
		  disabled={!currentFile}
		  onClick={upload}
		>
		  Upload
		</button>
	  </div>
	</div>

	{currentFile && (
	  <div className="progress my-3">
		<div
		  className="progress-bar progress-bar-info"
		  role="progressbar"
		  aria-valuenow={progress}
		  aria-valuemin={0}
		  aria-valuemax={100}
		  style={{ width: progress + "%" }}
		>
		  {progress}%
		</div>
	  </div>
	)}

	<Link to={"/profil"}>Zurück zum Profil</Link>
  </div>
	
  );
}

export default FileUpload;