import React, { useState, useEffect, Fragment } from 'react'
import AddEntityForm from './forms/AddEntityForm'
import EditEntityForm from './forms/EditEntityForm'
import EntityTable from './tables/EntityTable'
import axios from './myAxios'


const Entities = props => {

	const initialFormState = { id: '', title: '', subtitle: '', image: '', description: '', category: '' }

	// Setting state
	const [ entities, setEntities ] = useState([])
	const [ currentEntity, setCurrentEntity ] = useState(initialFormState)
	const [ editing, setEditing ] = 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?site=' + props.currentSite.id)
			console.log(results.data)
			setEntities(results.data)
			setLoading(false)
		}catch (e) {
			if (e) {
				console.error(e)
				setLoading(false)
			}
		}
	}

	const addEntity = entity => {
		setLoading(true)
		axios.post('/.netlify/functions/add?site=' + props.currentSite.id, entity)
		.then((response) => {
			console.log(response)
			setEntities([ ...entities, entity ])
			setLoading(false)
		})
		.catch((err) => {
			console.error(err)
			setLoading(false)
		})		
	}

	const deleteEntity = id => {
		setLoading(true)
		axios.post('/.netlify/functions/delete?site=' + props.currentSite.id, {id : id})
		.then((response) => {
			setEntities(entities.filter(entity => entity.id !== id))
			setLoading(false)
		})
		.catch((err) => {
			console.error(err)
			setLoading(false)
		})	
	}

	const updateEntity = (id, updatedEntity) => {
		setLoading(true)
		axios.post('/.netlify/functions/add?site=' + props.currentSite.id, updatedEntity)
		.then((response) => {
			setEditing(false)
			setEntities(entities.map(entity => (entity.id === id ? updatedEntity : entity)))
			setLoading(false)
		})
		.catch((err) => {
			console.error(err)
			setLoading(false)
		})	
	}

	const editRow = entity => {
		setEditing(true)
		setCurrentEntity(entity)
	}

	return (
        <div className="flex-row">
			<div className={loading ? "loading" : ""}></div>
            <div className="flex-large">
                <button onClick={() => props.setViewing(false)} className="button muted-button">
                    Back
                </button>
                <h2>Content for site: {props.currentSite.name} </h2>
                <EntityTable entities={entities} editRow={editRow} deleteEntity={deleteEntity} />
            </div>
            <div className="flex-large">
                {editing ? (
                    <Fragment>
                        <h2>Edit entity</h2>
                        <EditEntityForm
                            editing={editing}
                            setEditing={setEditing}
                            currentEntity={currentEntity}
                            updateEntity={updateEntity}
                        />
                    </Fragment>
                ) : (
                    <Fragment>
                        <h2>Add entity</h2>
                        <AddEntityForm addEntity={addEntity} />
                    </Fragment>
                )}
            </div>
        </div>
	)
}

export default Entities