<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<!--<link rel="import" href="../../bower_components/paper-material/paper-material.html">-->
<!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->
<!--<link rel="import" href="../../bower_components/paper-button/paper-button.html">-->
<!--<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
<!--<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">-->

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link rel="import" href="../../elements/elements.html">

<!--<script src="https://apis.google.com/js/platform.js"></script>-->
<!--<meta name="google-signin-client_id" content=" 747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com">-->

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<dom-module id="log-in">
  <template>
    <custom-style>
  <style>
  #card{
    width: 50%;
    height: 50%;
    padding-top: 25%;
    padding-left: 25%;
  }


@media (max-width:425px) {
  paper-material {
    width: 80%;
    /*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
    background-color: #ffffff;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);

  }
  .loginHead{
    /*padding-top: 14%;*/
    color: rgb(63,81,181);
    font-weight: bold;
    font-size: large;
    align-self: flex-start;
    padding-left: 4%;
  }
  .logoAndHead{
    padding-left: 23%;
    padding-top: 4%;
    /*line-height: 3em;*/
  }
  .headText{
    padding-top: 9%;
  }
}


    @media (min-width: 426px) {
      paper-material {
        width: 50%;
        /*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
        background-color: #ffffff;

        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform: -webkit-translate(-50%, -50%);
        transform: -moz-translate(-50%, -50%);
        transform: -ms-translate(-50%, -50%);

      }
      .loginHead{
        color: rgb(63,81,181);
        /*padding-top: 9%;*/
        font-weight: bold;
        font-size: large;
        align-self: flex-start;
        padding-left: 2%;
      }

    }
  @media (min-width: 426px)and (max-width: 1000px){
    .logoAndHead{
      padding-left: 33%;
      padding-top: 4%;
      /*line-height: 3em;*/
    }
    .headText{
      padding-top: 7%;
    }
  }

  @media (min-width: 1001px) and (max-width: 2000px){
    .logoAndHead{
      padding-left: 37%;
      padding-top: 4%;
      /*line-height: 3em;*/
    }
    .headText{
      padding-top: 5%;
    }
  }
  @media (min-width: 2001px) {
    .logoAndHead{
      padding-left: 45%;
      padding-top: 4%;
      /*line-height: 3em;*/
    }
    .headText{
      padding-top: 2%;
    }
  }

  .egluImg{
      /*float: left;*/
    }
    .egluImg>img{
      height: 45px;
      width: 51px;
    }

    paper-input{
      width: 100%;
    }
    paper-button{
      color: white;
      background-color:rgb(63,81,181) ;
    }

    .logo{
      padding-bottom: 4%;
    }
    a{
      color: rgb(107, 106, 106);
    }
    .loginText{
      color: rgb(63,81,181);
      font-size: large;
      font-weight: bolder;
      align-self: flex-end;
      padding-left: 2%;
    }
    img{
      vertical-align: middle;
    }

  </style>

    </custom-style>


        <div class="loginContainer">

          <paper-material elevation="1">
            <div class="logo">
          <div class="logoAndHead">
            <span class="egluImg" style="float: left">
              <img src="../../images/eglu-logo.jpg" >
            </span>
            <div class="layout horizontal wrap headText">
            <span class="loginHead">
              <img src="../../images/logo_text.svg" >
            </span>
            <span class="loginText">Login</span>
            </div>
          </div>
          <!--<center>-->
              <div style="padding-left: 8%;padding-right: 8%">

              <paper-input label="User Name" value="{{userName}}"></paper-input>

                <paper-input type="password" on-keypress="enterAccount" id="password" label="Password" value="{{password}}"></paper-input>
                <!--<i class="material-icons" on-click="_showHide" id="eye">visibility_off</i>-->
                <div>
                  <paper-button id="loginButton" raised on-click="sendRequest">Log in</paper-button>
                </div>


            <div style="padding-top: 2px">
              <a href="https://myeglu.com/oauth/forgot-password.html">Forgot Password?</a>
              <br>
            </div>
              </div>
          <!--</center>-->
          <!--<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>-->
        </div>
          </paper-material> <!--<google-signin client-id="747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com" scopes="https://www.googleapis.com/auth/drive"></google-signin>-->


        </div>
    <div style="text-align: center">
        <paper-toast id="errToast"></paper-toast>
    </div>

      <!--<google-signin-aware-->
        <!--id="signin"-->
        <!--on-click="_googleSignIn"-->
        <!--scopes="https://www.googleapis.com/auth/drive"-->
        <!--on-google-signin-aware-success="handleSignin"-->
        <!--google-signin-aware-error="handleError">-->
      <!--</google-signin-aware>-->

    <iron-ajax
              id="authenticate"
              method="POST"
              content-type="application/json"
               url="https://staging.myeglu.com/api/v1/customers"
               body="{{ajaxBody}}"
               handle-as="json"
                last-response="{{code}}"
                on-error="_handleError"
                on-response="_handleResponse">

    </iron-ajax>
  </template>

  <script>
    class LogIn extends Polymer.Element{
      static get is() {
        return "log-in";
      }
      static get properties() {
        return {
          userName:{
            type:String,
            value:'',
            notify:true
          },
          password:{
            type:String
          },
          code:{
            type:Object,
            notify:true
          },
          ajaxBody: {
            type: String,
            computed: 'processBody(userName, password)'
          },
          integrator:{
            type:String,
            notify:true,
            computed:'setIntegrator(userName)'
          },
          gResponse:Object
        }
      }
      constructor() {
        super();
      }
      ready(){
        super.ready();
      }
      handleSignin(response){
        var user = gapi.auth2.getAuthInstance()['currentUser'].get();
        console.log('User name: ' + user.getBasicProfile().getName());
        console.log('User token: ' + response.detail.id_token);
      }
      handleError(){

      }

      sendRequest(){
//          this.$.authenticate.headers={"clientid":"web"};
        this.$.authenticate.generateRequest();
      }
      _showHide(){
        var p = this.$.password;
        var q=p.getAttribute('type');


        if(q=='text'){
          p.setAttribute('type','password');
          this.$.eye.innerHTML = '<i class="material-icons">visibility_off</i>';
        }
        if(q=='password'){
          p.setAttribute('type','text');
          this.$.eye.innerHTML = '<i class="material-icons">visibility</i>';
        }
      }
      processBody(userName, password) {
        return JSON.stringify({emailId: userName, password: password,authProvider: "INTERNAL"});
      }
      _handleResponse(e){
        console.log('status'+e.detail.xhr.status);
        if(this.code.message=="Login Success"){
          var expiry = new Date();
          expiry.setTime(expiry.getTime()+(15*24*60*60*1000)); // one week
          console.log('it is called');

          this.setCookie('token',this.code.token,15);
          this.setCookie('loggedIn','yes',15);
          this.setCookie('email',this.userName,15);
          window.location.href = "/admin/";
//          window.location.href = "/";
        }
        else
          window.alert('wrong credentials, Try again');
      }
      _handleError(e){
        if(e.detail.request.xhr.response.message=='Wrong password') {

          this.$.errToast.text = 'Wrong Password';
          this.$.errToast.show();
        }
        if(e.detail.request.xhr.response.loginState=='ACCOUNT_NOT_FOUND') {

          this.$.errToast.text = 'You are not eGlu User or check your credentials';
          this.$.errToast.show();
        }
      }
      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=/";
      }
      setIntegrator(userName){
        return userName;
      }
      onSignIn() {
        var profile = googleUser.getBasicProfile();
        console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
        window.location.href = "../../index.html";
      }
      onFailure(error) {
        alert(error);
      }
      renderButton () {
        gapi.signin2.render('gSignIn', {
          'scope': 'profile email',
          'width': 240,
          'height': 50,
          'longtitle': true,
          'theme': 'dark',
          'onsuccess': onSuccess,
          'onfailure': onFailure
        });
      }
      enterAccount(event) {
        if (event.keyCode == 13) {
          this.$.loginButton.click();
        }
      }
    }
    customElements.define(LogIn.is, LogIn);
  </script>
</dom-module>