class SideNav extends Component {

    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            fullname: '',
            purok: '',
            userType: 'purokLeader'
        }
    }

    state = {
        open: false,
    };

    onOpenModal = () => {
        this.setState({ open: true });
    };

    onCloseModal = () => {
        this.setState({ open: false });
    };

    signOut() {
        firebaseApp.auth().signOut();
    };



    signsUp() {
        // console.log('this.state', this.state);
        // const { email, password, fullname, purok } = this.state;
        // firebaseApp.auth().createUserWithEmailAndPassword(email, password)
        //     .catch(error => {
        //         this.setState({error})
        //     })

        // firebaseApp.database().ref('Usersyeah/').push({
        //
        //    Fullname: this.state.fullname,
        //    PurokNo: this.state.purok,
        //    Email: this.state.email,
        //    Password: this.state.password,
        //    User: "purokLeader"
        //
        //
        // });

        firebaseApp.database().ref('Usersyeah/').push({
            name: this.state.fullname,
            purok: this.state.purok,
            email: this.state.email,
            password: this.state.password,
            user: "purokLeader"

        });

    };

    render() {
        const { open } = this.state;

        return (
            <div className="container">

                <div className="sidebar" style={sideBarColor}>
                    <div className="logoCont">
                        <img src={logo} className="sideLogo"/>
                    </div>

                    <Link to="/" ><img src={home} style={{width: '30px'}} alt="Log Out image"  /> Dashboard</Link>
                    <Link to="/docproc"> Document Services</Link>
                    <Link to="/sumbong"> Sumbong Center</Link>
                    <Link to="/announce"> Announcement</Link>
                    <div style={{ marginTop: ''}} ><Link to="#" onClick={() => this.onOpenModal()}><img src={logoutIcon} style={{width: '30px'}} alt="Log Out image"  /> Add User</Link></div>

                    <div style={{ marginTop: '35px'}} ><Link to="#" onClick={() => this.signOut()}><img src={logoutIcon} style={{width: '30px'}} alt="Log Out image"  /> Log out</Link></div>

                </div>
                <div>
                    <Modal open={open} onClose={this.onCloseModal} >
                        <h4>Simple centered modal</h4>
                        <input name="Name" id="fullname" type="text" ref="Fname" placeholder="Enter Your Fullname..." style={mainDivInput}     onChange={event => this.setState({ fullname: event.target.value })}/>
                        <input id="PurokNum" type="text" ref="PurokNum" placeholder="Purok No."  style={mainDivInput}    onChange={event => this.setState({ purok: event.target.value })}/>
                        <input id="email" type="email" ref="Email" placeholder="Enter Your Email..."  style={mainDivInput}    onChange={event => this.setState({ email: event.target.value })}/>
                        <input name="password" id="password" type="password" ref="Pword" placeholder="Enter Your Password..." style={mainDivInput}   onChange={event => this.setState({password: event.target.value })} />


                        <div>
                            <button className="btn btn-primary" style={{height: '40px', marginTop: '100px', marginLeft: '330px'}} onClick={this.signsUp} >Create</button>&nbsp;

                        </div>
                    </Modal>
                </div>
            </div>
        );
    }


}

export default withRouter(SideNav) ;