import React, { Fragment, useEffect, useState } from 'react'

import axios from 'axios'

import Sites from './Sites'

const App = () => {

const initialFormState = { username: '', password: '' }

const [ user, setUser ] = useState(initialFormState)

const [ auth, setAuth ] = useState(false)

const handleInputChange = event => {

const { name, value } = event.target

setUser({ ...user, [name]: value })

}

const logout = event => {

localStorage.removeItem('token');

setAuth(false);

}

const doAuth = (token) => {

axios.get('/.netlify/functions/auth?token=' + token)

.then((response) => {

console.log(response)

localStorage.setItem('token', token);

setAuth(true)

setUser(initialFormState)

})

.catch((err) => {

if (err.response && err.response.status && err.response.status === 401) {

alert("Invalid Password");

logout();

}else{

console.error(err)

}

})

}

useEffect(() => {

const token = localStorage.getItem('token');

if(token){

doAuth(token)

}

}, []) // eslint-disable-line react-hooks/exhaustive-deps

return (

<div className="container">

<h1>FastSite Console</h1>

{auth ? (

<Fragment>

<div className="right-align"><button onClick={logout} className="button muted-button">

Logout

</button></div>

<Sites />

</Fragment>

) : (

<form

onSubmit={event => {

event.preventDefault()

if (!user.username || !user.password){

alert("Please provide username and password");

return

}

doAuth(user.password);

}}

>

<label>Username</label>

<input type="text" name="username" value={user.username} onChange={handleInputChange} className="text-box"/>

<label>Password</label>

<input type="password" name="password" value={user.password} onChange={handleInputChange} className="text-box"/>

<button>Login</button>

</form>

)}

</div>

)

}

export default App