<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-card/paper-card.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/communication-icons.html">
<link rel="import" href="../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="shared-styles.html">

<!--
`pe-login`
Login page for Poke Erudite

@demo demo/index.html
-->

<dom-module id="pe-login">
  <template>
    <style>
       :host {
        display: block;
      }

      paper-card {
        width: 30%;
        text-align: left;
      }

      paper-button[primary]:not([disabled]) {
        color: var(--primary-color);
        background: transparent;
      }

      paper-icon-button:disabled {
        color: #000 !important;
      }

      paper-button:disabled {
        background: var(--light-background-color);
      }

      paper-button {
        padding: 2%;
      }

      paper-progress {
        width: 100%;
        --paper-progress-active-color: var(--primary-color);
      }

      #progressHidden {
        display: none;
      }
    </style>

    <!--Put the iron-ajax element here-->

    <iron-ajax id="loginAjax" method="POST" auto handle-as="json" last-response="loginResponse" on-response="loginCheck" on-error="loginError"></iron-ajax>


    <paper-tooltip delay="0" for="icon" position="top" offset="14">
      [[_message]] Password
    </paper-tooltip>
    <center>
      <paper-card heading="Sign In" elevation="1" animated-shadow>
        <div class="card-content">
          <paper-input id="userName" label="Username">
            <paper-icon-button disabled slot="prefix" icon="account-circle"></paper-icon-button>
          </paper-input>
          <paper-input id="userPassword" label="Password" type="[[_passputType]]">

            <paper-icon-button slot="prefix" disabled icon="communication:vpn-key"></paper-icon-button>

            <paper-icon-button slot="suffix" icon="[[_icon]]" id="icon" on-tap="setIcon"></paper-icon-button>
          </paper-input>
        </div>
        <div class="card-actions">
          <paper-button id="loginButton" primary on-tap="signIn">Sign In</paper-button>
        </div>

        <paper-progress indeterminate id="progressHidden"></paper-progress>

      </paper-card>
    </center>

  </template>

  <script>
    class PeLogin extends Polymer.Element {
      static get is() { return 'pe-login'; }
      static get properties() {
        return {
          _icon: {
            type: String,
            value: 'visibility',
            notify: true
          },
          _message: {
            type: String,
            value: 'Show'
          },
          _passputType: {
            type: String,
            value: 'password'
          }
        };
      }

      // Here go all the other handler function
      setIcon() {
        if (this._icon == 'visibility') {
          this._message = 'Hide';
          this._icon = 'visibility-off';
          this._passputType = 'text';
        } else {
          this._message = 'Show';
          this._icon = 'visibility';
          this._passputType = 'password';
        }
      }

      loginCheck(event) {
        var res;
        // Declare all the variables
        var button, progress, inputs, ajax, res;

        // Set their values
        button = this.$.loginButton;
        progress = this.$.progressHidden;
        inputs = {
          name: this.$.userName,
          password: this.$.userPassword
        };
        ajax = this.$.loginAjax;

        res = event.detail.response;

        if (res.verdict == 1) {
          console.log(
            " Username:" + res.username + ",  n Password: " + res.password
          );
        }
      }

      signIn() {
        // Declare all the variables
        var button, progress, inputs, ajax, res;

        // Set their values
        button = this.$.loginButton;
        progress = this.$.progressHidden;
        inputs = {
          name: this.$.userName,
          password: this.$.userPassword
        };
        ajax = this.$.loginAjax;

        ajax.body = JSON.stringify({
          'username': inputs.name.value,
          'password': inputs.password.value
        });
        ajax.url = 'http://localhost/php/login.php';

        ajax.generateRequest();

        button.disabled = !button.disabled;
        progress.id = '';
        inputs.name.disabled = !inputs.name.disabled;
        inputs.password.disabled = !inputs.password.disabled;

      }

      setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
      }

    }

    window.customElements.define(PeLogin.is, PeLogin);
  </script>
</dom-module>

<?php
$username = trim($_POST['username']);
$password = trim($_POST['password']);

echo json_encode(
  array(
    'verdict' => 1,
    'username' => $username,
    'password' => sha1($password)
  )
);