//
import React from 'react';
import Navbar from './includes/navbar';
import Form from './widgets/form';

const EditNote = (props) => {
    return(
        <div>
            <Navbar/>
            <Form type="edit" id={props.match.params.id}/>
        </div>
    )
}



export default EditNote;
                            

                                //
import React,{Component} from 'react';
import './form.css';
import {firebaseDB} from '../../firebase';

class Form extends Component{
    constructor(props){
        super(props);
        this.state = {
            title : '',
            body : '',
            errorMessage : '',
            successMessage : ''
        }
    }
    onTitleChanged = (event) => {
        this.setState({
            title : event.target.value
        })
    }
    onBodyChanged = (event) => {
        this.setState({
            body : event.target.value
        })
    }
    componentWillMount(){
        if(this.props.type === 'edit'){
            firebaseDB.ref(`notes/${this.props.id}`).once('value')
            .then((snapshot) => {
                this.setState({
                    title : snapshot.val().title,
                    body : snapshot.val().body
                })
            });
        }
    }
    formSubmit = (event) => {
        event.preventDefault();
        switch(this.props.type){
            case 'add' : 
                if(this.state.title && this.state.body !== ''){
                    let note = {
                        title : this.state.title,
                        body : this.state.body
                    }
                    firebaseDB.ref('notes').push(note)
                    .then(()=>{
                        this.setState({
                            successMessage : <div className="success-message">Note ajoutée</div>,
                            errorMessage : '',
                            title : '',
                            body : ''
                        })
                    })
                    .catch((e) => {
                        console.log(e);
                    });
                }else{
                    this.setState({
                        errorMessage : 'ce champ est obligatoire'
                    })
                }
            break;
            case 'edit' : 
                if(this.state.title && this.state.body !== ''){
                    let note = {
                        title : this.state.title,
                        body : this.state.body
                    }
                    firebaseDB.ref(`notes/${this.props.id}`).update(note)
                        .then(()=>{
                            this.setState({
                                successMessage : <div className="success-message">Note Modifiée</div>,
                                errorMessage : '',
                                title : '',
                                body : ''
                            })
                        }).catch((e) => {
                            console.log(e);
                        });
                    break;
                }else{
                    this.setState({
                        errorMessage : 'ce champ est obligatoire'
                    })
                }
            break;
            default :
                console.log("loading...");
        }
    }
    render(){
        return(
            <div className="form">
                {this.state.successMessage}
                <form onSubmit={this.formSubmit}>
                    <div className="form_element">
                        <label htmlFor="title">Titre*</label>
                        <input
                            value={this.state.title}
                            onChange={this.onTitleChanged}
                        />
                    </div>
                    <div className="form-error">
                        {this.state.errorMessage}
                    </div>
                    <div className="form_element">
                        <label htmlFor="body">Body*</label>
                        <textarea cols="30" rows="10"
                            value={this.state.body}
                            onChange={this.onBodyChanged}
                        />
                    </div>
                    <div className="form-error">
                        {this.state.errorMessage}
                    </div>
                    <div className="button_element">
                        <button type="submit">Valider</button>
                    </div>
                </form>
            </div>
        )
    }
}



export default Form;
                            

                                //
.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: beige;
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
    border-radius: 5px;
}
form{
    display: flex;
    flex-direction: column;
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
}
.form-error{
    color : red;
    margin : 10px 0;
    font-size: 15px;
    font-weight: 700;
}
.success-message{
    text-align: center;
    background-color: green;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
}
label,input{
    display: block;
}
input,textarea{
    margin:5px 0;
    padding: 5px;
}
button{
    background-color: white;
    border : 2px solid orange;
    padding: 10px;
    cursor: pointer;
    transition: all .5s ease;
}
button:hover{
    background-color: orange;
    color: white;
    cursor: pointer;
}