import React, { Component } from 'react'

import Loader from 'react-loader-spinner'

import {connect} from 'react-redux';

import {postRequest} from '../actions'

import {Link} from 'react-router-dom';

class Upload extends Component {

    state = {

        loading: false,

        file: [],

        error:""

    }

    handleFileUpload = (e) => {

        let filesUploaded = e.target.files

        this.setState({

            loading:true

        },

        ()=>console.log("Just Set to Loading!"))

        this.props.postRequest(filesUploaded).then(()=>this.setState({

            loading:false,

            error:"Data Succesfully Loaded"

        }))

        // .catch(()=>this.setState({

        //     loading: false,

        //     error: "Upload Failed. Please try again"

        // })).then(()=>this.setState({loading:false, error:"Data Succesfully Loaded"})

        // ).catch((e)=>this.setState({error: "Upload Failed. Please try again"}))

    }

    renderError = () => {

        if(this.state.error == "Data Succesfully Loaded"){

            return <p style ={{fontSize:"10px", margin:"20px 0px"}}>Your results have been loaded, check out <Link to ='/past' class="no-underline hover:underline text-blue-500 px-1">past results</Link> to view them</p>

        }

        if(this.state.error){

            return  <p style = {{color: "red", fontSize:"10px", margin:"20px 0px"}}>{this.state.error}</p>

        }

    }

    render() {

        if(this.state.loading){

            return(

                <div class="flex w-full h-screen items-center justify-center bg-grey-lighter">

                <Loader

                    type="TailSpin"

                    color="#00BFFF"

                    height={150}

                    width={150}

                />

                </div>

            )

        }

        else{

            return (

                <div className = "h-screen" style={{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"}}>

                <div class="flex w-full items-center justify-center bg-grey-lighter">

                <button onChange = {this.handleFileUpload}>

                <label class="w-64 flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer">

                        <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">

                        <path d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z" />

                        </svg>

                        <span class="mt-2 text-base leading-normal">Upload your image</span>

                        <span style = {{fontSize:"8px"}}>* Only PA and AP X-ray views are supported at the moment. Prediction accuracy might be affected if other views are used</span>

                        <input type='file' multiple class="hidden" />

                </label>

                </button>

                </div>

                {this.renderError()}

                </div>

                )

        }

    }

}

const mapStateToProps = state =>{

    return {

        images: state.Image

    }

}

export default connect(mapStateToProps,{

    postRequest

})(Upload);