import React , {useState, useEffect} from 'react';
import format from 'date-fns/format';

const getParticipants = () => {
    return fetch("http://localhost:3001/participant")
    .then(response => {
        if (response.ok) {
            return response;
        } else {
            return response.text()
            .then((text) => {
                throw new Error(text);
            });
        }
    })
    .then(response => {
        return response.json();
    })
    .catch(err => {
        console.log(err.message);
        throw err;
    });
};

const getTaches = () => {
    return fetch("http://localhost:3001/tache")
    .then(response => {
        if (response.ok) {
            return response;
        } else {
            return response.text()
            .then((text) => {
                throw new Error(text);
            });
        }
    })
    .then(response => {
        return response.json();
    })
    .catch(err => {
        console.log(err.message);
        throw err;
    });
};

const add_action = (action) => {
    return fetch("http://localhost:3001/partcipant/"+action.part+"/tache"+action.tache+"/action", 
    {
        method:"POST",
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(action.date)
    })
    .then(response => {
        if (response.ok) {
            return response;
        } else {
            return response.text()
            .then((text) => {
                throw new Error(text);
            });
        }
    })
    .then(response => {
        return response.json();
    })
    .catch(err => {
        console.log(err.message);
        throw err;
    });
};


const AddAction = ({add_action}) => {
    const [part, setPart] = useState("");
    const [tache, setTache] = useState("");
    const [date, setDate] = useState(format(new Date(), 'yyyy-MM-dd'));
    const [participants, setParticipants] = useState([]);
    const [taches, setTaches] = useState([]);

    useEffect(() => {
        getParticipants()
        .then(data => {
            setParticipants(data);
        })
        .catch(e => {
            console.log(e);
        });
    }, []);

    useEffect(() => {
        getTaches()
        .then(data => {
            setTaches(data);
        })
        .catch(e => {
            console.log(e);
        });
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        add_action({part: "id", tache: "tache"});
    }

    return <form onSubmit={handleSubmit}>
        <label htmlFor="participant"> Partcipant </label>
        <select value={part} onChange={e => setPart(e.target.value)}>
                {participants.map((p) => <option value={p.id}>{p.prenom} {p.nom}</option>)}
        </select>
        <br />
        <label htmlFor="nom"> Tâche </label>
        <select value={tache} onChange={e => setTache(e.target.value)}>
                {taches.map((t) => <option value={t.id}>{t.intitule}</option>)}
            </select>
        <br />
        <input type="date" value={date} onChange={e => setDate(e.target.value)} /><br />
        <button> Ajouter </button>
    </form>
}

const Actions = () => {
const [actions, setActions] = useState([]);


    const handleAdding = (data) => {
        add_action(data)
        .then(data => {
            setActions(actions => [...actions, data]);
        });
    };


    return (
        <div>
            <AddAction add_action={handleAdding}/>
        </div>
    );
}

export default Actions;