import React, { useState, useEffect, Fragment } from 'react'
import AddSiteForm from './forms/AddSiteForm'
import EditSiteForm from './forms/EditSiteForm'
import SiteTable from './tables/SiteTable'
import axios from './myAxios'
import Entities from './Entities'


const Sites = () => {

	const initialFormState = { id: '', name: '', heading: '', categories: [] }

	// Setting state
	const [ users, setUsers ] = useState([])
	const [ currentUser, setCurrentUser ] = useState(initialFormState)
	const [ editing, setEditing ] = useState(false)
	const [ viewing, setViewing ] = useState(false)
	const [ loading, setLoading ] = useState(false)

	useEffect(() => {
		fetchData()
	}, []) // eslint-disable-line react-hooks/exhaustive-deps

	// CRUD operations
	const fetchData = async () => {
		setLoading(true)
		try {
			const results = await axios.get('/.netlify/functions/list')
			console.log(results.data)
			setUsers(results.data)
			setLoading(false)
		}catch (e) {
			if (e) {
				console.error(e)
				setLoading(false)
			}
		}
	}

	const addUser = user => {
		setLoading(true)
		axios.post('/.netlify/functions/add', user)
		.then((response) => {
			console.log(response)
			setUsers([ ...users, user ])
			setLoading(false)
		})
		.catch((err) => {
			console.error(err)
			setLoading(false)
		})		
	}

	const deleteUser = id => {
		setLoading(true)
		axios.post('/.netlify/functions/delete', {id : id})
		.then((response) => {
			setUsers(users.filter(user => user.id !== id))
			setLoading(false)
		})
		.catch((err) => {
			console.error(err)
			setLoading(false)
		})	
	}

	const updateUser = (id, updatedUser) => {
		setLoading(true)
		axios.post('/.netlify/functions/add', updatedUser)
		.then((response) => {
			setEditing(false)
			setUsers(users.map(user => (user.id === id ? updatedUser : user)))
			setLoading(false)
		})
		.catch((err) => {
			console.error(err)
			setLoading(false)
		})	
	}

	const editRow = user => {
		setEditing(true)
		setCurrentUser(user)
	}

	const viewContent = user => {
		setEditing(false)
		setViewing(true)
		setCurrentUser(user)
	}

	return (
		<div>
			<div className={loading ? "loading" : ""}></div>
			{viewing ? (
				<Entities 
					viewing={viewing}
					setViewing={setViewing}
					currentSite={currentUser}
				/>
			) : (
				<Fragment>
					<div className="flex-row">
						<div className="flex-large">
							<h2>All sites</h2>
							<SiteTable users={users} editRow={editRow} deleteUser={deleteUser} viewContent={viewContent}/>
						</div>
						<div className="flex-large">
							{editing ? (
								<Fragment>
									<h2>Edit site</h2>
									<EditSiteForm
										editing={editing}
										setEditing={setEditing}
										currentUser={currentUser}
										updateUser={updateUser}
									/>
								</Fragment>
							) : (
								<Fragment>
									<h2>Add site</h2>
									<AddSiteForm addUser={addUser} />
								</Fragment>
							)}
						</div>
					</div>
				</Fragment>
			)}
		</div>
	)
}

export default Sites