<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">

<dom-module id="my-login">
  <template>
    <style>
      :root {
        --paper-input-container-focus-color: #1a9fd9;
      }
      :host {
        display: block;
      }

      span {
        @apply(--paper-font-body1);
      }
      .toast-button {
        text-transform: none;
        color: white;                           /* white tekst */
        background: #1a9fd9;                    /* kind of blue */
        --paper-button-ink-color: #00567B;      /* kind of dark blue */
        margin-left: 0px;
      }
      .usericondiv {
         @apply(--layout-horizontal);
         @apply(--layout-center-justified);
       }
      .my-icon {
        border: #D4D4D4 3px solid;
        border-radius: 150px;
        padding: 8px;
        --iron-icon-fill-color: #1a9fd9;
        height: 60px;
        width: 60px;
      }
      .my-input {
        padding-left: 8px;
        padding-right: 1px;
      }
      .my-button {
        width: 100%;
        color: white;
        background: #1a9fd9;
        --paper-button-ink-color: #00567B;
        margin-top: 5px;
      }
      .my-button[disabled] {            /* styling als de opslaan button disabled is. */
        background: lightgray;
        color: darkgray;
      }
    </style>

    <paper-toast id="toast_reeds_aangelogd" duration="0" text="U bent al ingelogd!">
      <paper-button on-click="_toast_clicked" class="toast-button">Sluiten</paper-button>
    </paper-toast>

    <div class="usericondiv">
      <iron-icon icon="icons:perm-identity" class="my-icon"></iron-icon>
    </div>
    <div class="my-input">
      <paper-input id="email_element" on-keydown="_checkForEnter" label="gebruikersnaam" value="{{username}}"></paper-input>
      <paper-input id="wachtwoord_element" on-keydown="_checkForEnter" label="wachtwoord" type="password" value="{{_password}}"></paper-input>
    </div>
    <paper-button
      id="login_button_element"
      class="my-button"
      on-click="_ophalen_login_request_handler"
      raised>
        Inloggen
    </paper-button>

    <iron-ajax
      id="ajax_login"
      method="POST"
      url="/login"
      handle-as="json"
      on-response="_ophalen_login_response_handler">
    </iron-ajax>

  </template>

  <script>
    (function() {
      'use strict';

      /* _xxxx private              : geen external data binding      - geen notify
         _c_xx private constant     : geen external binding, constant - geen notify
         c_xx  public constant      : one way external databinding [[c_xx]] - geen notify nodig
         xxxx  public               : two way external databinding {{xxxx}} - notify nodig
      */
      Polymer({
        is: 'my-login',

        properties: {
          _password: {
            type: String,
            value: "geheim",                           /* om snel te testen zonder steeds input te doen */
          },
          rol: {
            type: String,
            notify: true,
          },
          username: {
            type: String,
            value: "john.smeets@hu.nl",              /* om snel te testen zonder steeds input te doen */
            notify: true
          },
        },

        _checkForEnter: function (e) {
          if (e.currentTarget.id == "email_element") {
            if (e.keyCode === 13) {
              var lWachtwoordElement =
                this.$.wachtwoord_element;          /* haal uit de $ collectie van alle polymer element
                                                       het element met id = "wachtwoord_element" */
            lWachtwoordElement.focus();             // plaats de cursor er in
            }
          } else if (e.keyCode === 13) {
            var lLoginButton =
              this.$.login_button_element;          /* haal uit de $ collectie van alle polymer element
                                                       het element met id = "login_button_element" */
            this.$.login_button_element.click();    // forceer een klik
          }
        },

        _go_home: function() {
          var lApp = document.querySelector('my-app');  //het polymer element <my-app>
          var lAppRouter = lApp.$.approuter;            // het html-element <app-route> met id=approuter
          lAppRouter.data={page: ""};                   // vul het data attribute met de homepage url
                                                        // door de two way binding in <app-route> en <app-location>
                                                        // zal ook de url echt wijzigen
         },

         _ophalen_login_request_handler: function() {
          console.log("_ophalen_login_request_handler username=" + this.username);
          if (this.rol == "undefined") {
            this.$.ajax_login.contentType="application/json";
            this.$.ajax_login.body={
              "username":this.username,
              "password":this._password
            };
            this.$.ajax_login.generateRequest();
          } else {
            var lToast = this.$.toast_reeds_aangelogd;     // meldt reeds aangelogd
            lToast.open();                                  /* het sluiten van deze error verwijst  */
                                                            /* terug naar home page */
          }
        },

        _ophalen_login_response_handler: function(request) {
          console.log("_ophalen_login_response_handler username="+this.username);
          this.rol = request.detail.response.rol;
          /* this._password = ""; /* om snel te kunnen testen is dit verwijderd */
          if (this.rol == "undefined") {                    //als aanloggen mislukt
            this.$.email_element.invalid = true;                // markeer email-element
            this.$.wachtwoord_element.invalid = true;           // markeer wachtwoord-element

          } else {                                            // als aanloggen ok
            this.$.email_element.invalid = false;               // verwijder fout markering
            this.$.wachtwoord_element.invalid = false;          // verwijder fout markering
            this._go_home();                                    // ga naar de home page.
          }
        },

        _toast_clicked: function(e) {
          var lToast = e.path[1];       //path[0] is de button. path[1] is de owner etc.
          lToast.toggle();              //sluit de foutmelding
          this._go_home();              // en ga verder op de home page
        },

      });

    })();
  </script>
</dom-module>