import React, { useState } from 'react'
import '../../App.css'
import Footer from '../ComponentUtils/Footer'

import ImageUploadCard from '../ComponentUtils/ImageUploadCard'

import Navbar from '../ComponentUtils/Headers/Navbar'

import { useHistory } from "react-router-dom";
import { Button, Container, Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'

import { sendRequest } from '../../Utils/sendRequest'

// Background.css is now globally imported in src/index.js

const useStyles = makeStyles({
  multiUploadButton: {
    borderRadius: '25px',
    padding: '12px 30px',
    fontSize: '16px',
    fontWeight: '500',
    textTransform: 'none',
    background: 'linear-gradient(45deg, #2196F3 30%, #1976D2 90%)',
    color: 'white',
    marginTop: '20px',
    '&:hover': {
      background: 'linear-gradient(45deg, #1976D2 30%, #2196F3 90%)',
      transform: 'translateY(-2px)',
      boxShadow: '0 4px 12px rgba(33, 150, 243, 0.3)'
    }
  },
  buttonContainer: {
    textAlign: 'center',
    marginTop: '20px',
    marginBottom: '20px'
  }
});

function UploadPage() {
  const classes = useStyles();


     // History for pushing to a new link after uploading image
  const history = useHistory(); 

  const [loading, setLoading] = useState(false)


  const handleLoading = () => {
    setLoading(true)
  }

  const handleResponse = (value) => {
    // Router push to uploadd page
    setTimeout(() => {
      setLoading(false)
      history.push(value.data.filePath)
      Swal.fire({
        icon: 'success',
        title: "Your image was uploaded!",
        showConfirmButton: false,
        timer: 1500
      })
    }, 1400)    
  }

    const handlePaste = (event) => {
        const fileUploaded = event.clipboardData.files[0]
        sendRequest(fileUploaded, handleLoading, handleResponse)
    }

    const handleMultiUpload = () => {
        history.push('/multi-upload')
    }

    return (
        <div className="allContainer" onPaste={handlePaste}>
            <Navbar />
            <ImageUploadCard handleLoading={handleLoading} handleResponse={handleResponse} loading={loading}/>
            
            <Container maxWidth="sm">
                <div className={classes.buttonContainer}>
                    <Button
                        className={classes.multiUploadButton}
                        onClick={handleMultiUpload}
                        size="large"
                    >
                        📸 Mehrere Bilder hochladen
                    </Button>
                </div>
            </Container>

            <div className="footerContainer">
                <Footer />
            </div>
        </div>
    )
}

export default UploadPage