import { Meteor } from 'meteor/meteor';
import React from 'react';
import i18n from 'meteor/universe:i18n';

import ProfileDropDown from './profileDropdown.jsx';
import { Link } from 'react-router-dom';
import { withTracker } from 'meteor/react-meteor-data';
import './menu.css';

export default class Menu extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			form: "login"
		}
	}

	changeForm() {
		const form = this.state.form;
		this.setState({
			form: form == "login" ? 'signup' : 'login'
		})
	}
	formLogin(event) {
		event.preventDefault();
		console.log('login')
	}
	formSignup(event) {
		event.preventDefault();
		console.log('signup')
	}
	loginWithFacebook() {
		let self = this;
		Meteor.loginWithFacebook((err) => {
			err ? null : self.state.modalInstance.close();

		})
	}

	componentDidMount() {
		let self = this;
		const sideNav = document.querySelector('.sidenav');
		const sideNavInstance = new M.Sidenav(sideNav, {});

		var modal = document.querySelector('.modal');
		var modalInstance = new M.Modal(modal, {});
	}

	componentWillUnmount() {
	}

	render() {
		const formId = this.state.form == "login" ? "login" : "signup";
		const event = formId == "login" ? this.formLogin : this.formSignup;
		return (
			<div>
				<nav className="white z-depth-1">
					<div className="nav-wrapper">
						<img src="/svg/logo.svg" className="responsive-img brand-logo" />
						<a href="#" data-target="sideMenu" className="sidenav-trigger"><i className="material-icons">menu</i></a>
						{['navMenu', 'sideMenu'].map(nav => {
							const menuClass = nav == 'navMenu' ? "right hide-on-med-and-down" : "sidenav";
							return (
								<ul id={nav} className={menuClass} key={nav}>
									<li><Link to="/">{i18n.__('homepage')}</Link></li>
									<li><a href="collapsible.html">{i18n.__('all_travels')}</a></li>
									{!this.props.user ?
										<React.Fragment>
											<li><a href="/">{i18n.__('how_it_works')}</a></li>
											<li><a href="collapsible.html">{i18n.__('about')}</a></li>
											<li><a href="collapsible.html">{i18n.__('blog')}</a></li>
											<li><a href="collapsible.html">{i18n.__('signup')}</a></li>
											<li><a className="login-modal-trigger modal-trigger" href="#login-modal">{i18n.__('login')}</a></li>
										</React.Fragment>
										:
										<React.Fragment>
											<ProfileDropDown image={this.props.user.profile.image} name={this.props.user.profile.name} surname={this.props.user.profile.surname} />
										</React.Fragment>
									}
								</ul>
							)
						})
						}

					</div>
				</nav>

				<div id="login-modal" className="modal">
					<div className="modal-content row" style={{ height: "auto", padding: "0", marginBottom: "0" }}>

						<div className={`col s12 m6 leftPanel ${formId}`} style={{ height: "auto" }}>
							<h5 className="center" style={{ fontSize: "1.3em" }}>
								{formId == 'login' ? i18n.__('login_account') : i18n.__('create_account')}
							</h5>
							<form id={formId} style={{ overflow: "auto" }} onSubmit={(e) => event(e)}>
								<div className="input-field col s12">
									<input id="username" type="text" />
									<label htmlFor="username">{i18n.__('username')}</label>
								</div>
								<div className="input-field col s12">
									<input id="password" type="password" />
									<label htmlFor="password">{i18n.__('password')}</label>
								</div>
								{formId == 'signup' ?
									<div>
										<div className="input-field col s12">
											<input id="name" type="text" />
											<label htmlFor="name">{i18n.__('first_name')}</label>
										</div>
										<div className="input-field col s12">
											<input id="surname" type="text" />
											<label htmlFor="surname">{i18n.__('surname')}</label>
										</div>
										<div className="input-field col s12">
											<input id="email" type="email" />
											<label htmlFor="email">{i18n.__('email')}</label>
										</div>
									</div>
									:
									''
								}
								<button className="btn-flat teal white-text waves-effect waves-light col s12 center" type="submit" name="action">
									<i className="material-icons left">send</i>{formId == "login" ? i18n.__('login') : i18n.__('signup')}
								</button>
							</form>
							{
								formId == 'login' ?
									<div className="form-between center">{i18n.__("dont_have_account")}<a href="#" onClick={() => this.changeForm()}> {i18n.__('click_here')}</a></div>
									:
									<div className="form-between center">{i18n.__('already_have_an_account')}<a href="#" onClick={() => this.changeForm()}> {i18n.__('click_here')}</a></div>
							}
							<a onClick={() => this.loginWithFacebook()} className="waves-effect waves-light btn-flat col s12 center" style={{ background: "#3e5b98", color: "#fff" }}><i className="socicon socicon-facebook left"></i>{i18n.__('login_with_facebook')}</a>
						</div>
						<div className={`col m6 rightPanel hide-on-small-only ${formId}`}>
						</div>

					</div>
				</div>

			</div>
		);

	}
}