import _Login from "./_Login.js";
import _User from "./_User.js";
import _AccountApplication from "./_AccountApplication.js";
import AccountApplicationBox from './AccountApplicationBox.js';
import _Navigation from './_Navigation.js';

var LoginBox = function(){
  return {
    view: function(vnode){
      if(!_User.isLoggedIn()){
        return m('.column.col-8', [
            m('.form-group', [
              //m('button.red',{onclick: function(){ _Login.is_hidden = true; }},'Close'),
              m('.has-icon-left', [
                m('input[type=text][placeholder=Username].form-input', {
                  onchange: function(e){ _Login.username = e.target.value; },
                  value: _Login.username
                  }),
                m('i.form-icon.icon.icon-arrow-right')
                ]),
              m('input[type=password][placeholder=Password].form-input', {
                onchange: function(e){ _Login.password = e.target.value; },
                value: _Login.password
                }),
              m('button.btn.btn-primary', {onclick: function(e){
                e.preventDefault(); // this is require since the button is in a form
                _User.attemptLogin(_Login.username, _Login.password);
                }}, "Login"),
              m('button.btn', {onclick: function(e){
                e.preventDefault(); // this is require since the button is in a form
                _Navigation.navigateTo(AccountApplicationBox, null);
                }}, "Apply for Account")
              ])
          ]);
        }
      else{
        return m('.logout_box.column.col-11', [
          m('button.btn.btn-primary', {
            onclick: function(){
              _User.logout();
              _Login.username = "";
              _Login.password = "";
              }}, 'Logout')
          ])
        }
      }
    };
  };

export default LoginBox;