import React from "react";
import {useState, useEffect} from 'react'
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import LinearProgress from '@mui/material/LinearProgress';
import { Box, Typography, Button } from '@mui/material';

import axios from 'axios';

const baseURL = "http://localhost:8000/api"

const Input = styled('input')({
  display: 'none',
});

function LinearProgressWithLabel(props) {
  return (
    <Box sx={{ display: 'flex', alignItems: 'center' }}>
      <Box sx={{ width: '100%', mr: 1 }}>
        <LinearProgress variant="determinate" {...props} />
      </Box>
      <Box sx={{ minWidth: 35 }}>
        <Typography variant="body2" color="text.secondary">{`${Math.round(
          props.value,
        )}%`}</Typography>
      </Box>
    </Box>
  );
}

LinearProgressWithLabel.propTypes = {
  /**
   * The value of the progress indicator for the determinate and buffer variants.
   * Value between 0 and 100.
   */
  value: PropTypes.number.isRequired,
};

const UploadFiles = (props) => {
    const { apiURL, fileName, buttonText, applyBinarize, debug } = props;

    const [progress, setProgress] = useState(0);
    const [uploadFile, setUploadFile] = useState(0);
    
    const handleUploadSelection = (e) => {
        console.log(e.target.files[0])
        setUploadFile(e.target.files[0]);
    };
    
    const handleUpload = (event) => {
        event.preventDefault()
        const formData = new FormData();
        console.log(uploadFile)
        formData.append("fileTitle", fileName);
        formData.append("applyBinarize", applyBinarize);
        formData.append("debug", debug);
        formData.append("uploadedFile", uploadFile);
        axios.post(baseURL+apiURL, formData, {
            headers: {
            'content-type': 'multipart/form-data'
            }
        })
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
    };
    
    return(
        <div style={{ height: 100, width: '100%' }}>
            <Box sx={{ width: '100%' }}>
                <LinearProgressWithLabel value={progress} />
            </Box>
            
            <label htmlFor="contained-button-file">
                <Input 
                    accept="image/*" 
                    id="contained-button-file" 
                    multiple type="file" 
                    onChange={handleUploadSelection}
                />
                <Button variant="contained" component="span">
                    Bild auswählen
                </Button>
                <div className="file-name">
                    {uploadFile && uploadFile.length > 0 ? uploadFile[0].name : null}
                </div>
                <Button 
                    variant="contained" 
                    component="span"
                    onClick={handleUpload}
                >
                    {buttonText}
                </Button>
            </label>
        </div>
    )
}

export default UploadFiles