# dependencies
gradients = require '@allenbrowntech/lemon-gradients'
icons = require '@allenbrowntech/lemon-icons'
addClass = require '../js/addClass'
removeClass = require '../js/removeClass'
cookies = require '../js/cookies'

# template
module.exports = (_) ->
  throw new Error "missing 'apikey' for firebase signin" if not _.apikey
  throw new Error "missing 'authdomain' for firebase signin" if not _.authdomain

  if _.background
    lg = "linear-gradient(to top, rgba(24,31,54,.8), rgba(24,31,54,0.8))"
    style = "background-image: #{lg}, url('#{_.background}')"
  else if _.gradient
    style = gradients.getCSS _.gradient

  div '#signin', style: style, ->
    div '.content', ->

      if _.logo
        img src: _.logo

      div '#logged-out.hidden', ->
        if _.email
          label -> 'Email'
          input '#auth-email', type: 'text', name: 'email'
          label -> 'Password'
          input '#auth-password', type: 'password', name: 'password'
          div '#login-button', ->
            'Sign In'
          div '#status-message'
          div '#error-message'

        div '.divider'

        div '.social', ->
          if _.google
            div '.icon google', ->
              a href: '', ->
                raw icons['google-plus']
          if _.facebook
            div '.icon facebook', ->
              a href: '', ->
                raw icons['facebook']
          if _.twitter
            div '.icon twitter', ->
              a href: '', ->
                raw icons['twitter']

      div '#logged-in.hidden', ->
        h3 -> "You are currently logged in as "
        span id: 'user-email'
        a '#continue-button', href: '/', ->
          'Continue to Site'
        a '#change-account', ->
          'Use another account'

      addClass()
      removeClass()
      cookies()

      script src: "https://www.gstatic.com/firebasejs/4.2.0/firebase-app.js"
      script src: "https://www.gstatic.com/firebasejs/4.2.0/firebase-auth.js"
      script 'data-id': 'firebase-init', -> raw """
        var config = {
          apiKey: "#{_.apikey}",
          authDomain: "#{_.authdomain}",
        };
        firebase.initializeApp(config);
      """

      script 'data-id': 'login-management', -> raw """
        (function(){

          // get elements
          var $change_account = document.getElementById('change-account');
          var $continue_button = document.getElementById('continue-button');
          var $email = document.getElementById('auth-email');
          var $err = document.getElementById('error-message');
          var $error = document.getElementById('error-message');
          var $logged_in = document.getElementById('logged-in');
          var $logged_out = document.getElementById('logged-out');
          var $login_button = document.getElementById('login-button');
          var $password = document.getElementById('auth-password');
          var $status = document.getElementById('status-message');
          var $user_email = document.getElementById('user-email');

          // modify continue link
          var query = document.location.search.substring(1);
          var match;
          if (match = query.match("next=([^&]+)")) {
            var next = match[1];
            $continue_button.setAttribute("href", "/" + next);
          }

          // watch for auth changes
          firebase.auth().onAuthStateChanged(function(user) {
            $status.innerText = '';
            $error.innerText = '';

            // user is now logged in
            if (user) {
              Cookie.set("__session", user.uid);
              $user_email.innerText = user.email;
              removeClass($logged_out, 'active');
              setTimeout(function(){
                addClass($logged_out, 'hidden');
                removeClass($logged_in, 'hidden');
                setTimeout(function() {
                  addClass($logged_in, 'active');
                }, 100);
              }, 600);
            }

            // user is logged out
            else {
              removeClass($logged_in, 'active');
              setTimeout(function(){
                addClass($logged_in, 'hidden');
                removeClass($logged_out, 'hidden');
                setTimeout(function() {
                  addClass($logged_out, 'active');
                }, 100);
              }, 600);

            }
          });

          // watch for change account click
          $change_account.addEventListener('click', function() {
            removeClass($logged_in, 'active');
            setTimeout(function(){
              addClass($logged_in, 'hidden');
              removeClass($logged_out, 'hidden');
              setTimeout(function() {
                addClass($logged_out, 'active');
              }, 100);
            }, 600);

            // sign the user out
            firebase.auth().signOut().then(function() {
              Cookie.remove('uid');
            }).catch(function(error) {
              $error.innerText = error.message;
            });

          });

          // perform a login with the current email/password
          var login = function() {
            var email = $email.value;
            var password = $password.value;
            $status.innerText = 'Signing in. Wait just a moment...';
            firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(function() {
              firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
                if (error.message) {
                  $err.innerText = error.message
                }
              });
            }).catch(function(error) {
              if (error.message) {
                $err.innerText = error.message
              }
            });
          }

          // reset error text on email input
          $email.addEventListener('keypress', function() {
            $err.innerText = '';
          });

          // reset error text on password input and submit form on enter
          $password.addEventListener('keypress', function(e) {
            $err.innerText = '';
            if (e.keyCode == 13) {
              login();
            }
          });

          // submit login on login button click
          $login_button.addEventListener('click', function() {
            login();
          });
        })();
      """