f<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner-lite.html">
<link rel="import" href="egg-resources/shared-styles.html">

<dom-module id="egg-login">
    <template>
        <style>
            :host {display:block;margin:0 auto;padding-top:10px;background-color:white;--paper-input-container-color:var(--app-primary-color);--paper-input-container-focus-color:var(--app-primary-color);--paper-input-container-input-color:var(--app-primary-color);--paper-dropdown-menu:{display:block;}}
            * {padding:0;margin:0;}
            paper-spinner-lite {--paper-spinner-color:var(--app-primary-color);--paper-spinner-stroke-width:5px;margin-top:50px;}
            .flex-container {display:flex;flex-flow:column wrap;justify-content:center;align-items:center;max-width:100%;}
            .flex-child {margin:0 auto;}
            .flex-img {display:block;height:140px;}
            .login-form,
            .security-form {color:var(--app-primary-color);max-width:340px;padding:5px;text-align:center;width:100%;}
            .security-form {text-align:left;}
            paper-input {text-align:left;color:white;}
            paper-checkbox {font-size:0.8em;margin:10px 0 15px 0;}
            .forgot-password{padding:20px;color:var(--app-primary-color);text-align:center;width:auto;margin:20px;max-width:330px;}
            .forgot-password div{max-width:500px;}
            .button-container {margin-top:20px; text-align:center;}
            .button-container a {cursor:pointer;}
            .clear {clear:both;}
            button {background:none;border:1px solid var(--app-primary-color);color:#555;font-size:1em;height:35px;margin-top:5px;width:100%;border-radius:35px;-webkit-border-radius:35px;-moz-border-radius:35px;}
            button[type=submit] {background-color:var(--app-primary-color);color:#fff;margin-bottom:20px;}
            ul {padding:0;margin:0;text-align:left;list-style-position:inside;}
            p {font-weight:500;}
            a#forgot-password {color:var(--app-primary-color);display:inline-block;font-size:.8em;margin:10px 0;}
            #version {color:#000;font-size:10px;padding:10px 0;}
            .keyItem {padding:5px 15px;}
            .forgot-password .keyItem {border:2px solid dimgray;border-radius:20px;color:#000;cursor:pointer;display:inline-block;font-weight:500;margin:0;text-align:center;}
            .forgot-password.verification {max-width:360px;}
            .forgot-password.verification .keyItem {max-width:164px;width:49%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
            .forgot-password p {color:#717171;font-weight:400;}
            .security-form #info {color:#000;font-size:14px;font-weight:400;line-height:1;padding:20px 0 15px 0;}
            .security-form #help {color:#999;font-size:14px;padding-top:10px;text-align:center;}
            .security-form #help a {text-decoration:none;}
        </style>
        <div class="card">
            <div class="flex-container">
                <dom-if if="[[!user]]">
                    <template>
                        <div class="flex-child">
                            <img src="/images/eggacy-logo-gold.png" alt="Eggacy Logo" class="flex-img">
                        </div>
                        <dom-if if={{_shouldShowLogin}}>
                            <template>
                                <form class="login-form" on-keypress="_onLoginKeypress">
                                    <h1>LOG IN</h1>
                                    <p>{{loginMessage}}</p>
                                    <paper-input type="text" placeholder="Email" value={{email}} required></paper-input>
                                    <paper-input type="password" placeholder="Password" value="{{password}}" required></paper-input>
                                    <a id="forgot-password" href="" on-click="_onForgotPassword">Forgot your password?</a><BR>
                                    <button type="submit" on-click="_authenticateUser">Sign In</button>
                                    <p>Don’t have an account yet? Create one today!</p>
                                    <button type="button" class="secondary" on-click="_onClickJoinButton">Join Eggacy</button>
                                    <div id="version">version 1.47.1</div>
                                </form>
                            </template>
                        </dom-if>
                        <dom-if if="{{_shouldShowForGotPassword}}">
                            <template>
                                <form class="forgot-password" on-keypress="_onForgotKeypress">
                                    <div>
                                        <p>{{forgotMessage}}</p>
                                        <h3>FORGOT YOUR PASSWORD?</h3>
                                        <p>Enter your account's email below and when you click Submit, we'll send a code for confirmation.</p>
                                        <paper-input id="forgotEmail" label="Account Email" value={{forgotEmail}} required></paper-input>
                                        <div class="button-container" style="display:flex;justify-content:center;align-items:center;">
                                            <div style="float:left;width:50%;text-align:center;">
                                                <a class="keyItem" on-click="_onForgotPasswordCancel" style="border-color:dimgray;">Go Back</a>
                                            </div>
                                            <div style="float:left;width:50%;text-align:center;">
                                                <a class="keyItem" on-click="_sendForgotPassword" style="border-color:dimgray;">Submit</a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </template>
                        </dom-if>

                        <dom-if if="{{_shouldShowForGotPasswordVerification}}">
                            <template>
                                <form class="forgot-password verification">
                                    <div>
                                        <p>{{forgotMessage}}</p>
                                        <h3>SETUP YOUR NEW PASSWORD</h3>
                                        <p>A verification code has been sent to {{forgotEmail}}.</p>
                                        <paper-input id="verificationCode" type="text" label="Verification Code" value={{verificationCode}} required></paper-input>
                                        <paper-input id="forgotPasswordString" type="password" label="Enter Your New Password" value={{forgotPasswordString}} required></paper-input>
                                        <paper-input id="forgotPasswordConfirm" type="password" label="Confirm Your New Password" value={{forgotPasswordConfirm}} required></paper-input>
                                        <paper-tooltip for="forgotPasswordString">
                                            <ul>
                                                <li>Must be at least 8 characters.</li>
                                                <li>Must contain at least 1 number.</li>
                                                <li>Must contain at least 1 uppercase letter</li>
                                                <li>Must contain at least 1 lowercase letter</li>
                                                <li>Must contain at least 1 symbol, i.e. '@' or '!'</li>
                                            </ul>
                                        </paper-tooltip>

                                        <paper-tooltip for="forgotPasswordConfirm">
                                            <ul>
                                                <li>Must be at least 8 characters.</li>
                                                <li>Must contain at least 1 number.</li>
                                                <li>Must contain at least 1 uppercase letter</li>
                                                <li>Must contain at least 1 lowercase letter</li>
                                                <li>Must contain at least 1 symbol, i.e. '@' or '!'</li>
                                            </ul>
                                        </paper-tooltip>

                                        <div class="button-container">
                                            <a on-click="_onPasswordConfirmCancel" class="keyItem" style="float:left;">Go Back</a>
                                            <a on-click="_onPasswordConfirm" class="keyItem" style="float:right;">Update Password</a>
                                        </div>
                                        <div class="clear"></div>
                                        <br>
                                        <p>Didn't get a code? Click below to resend.</p>
                                        <div class="button-container">
                                            <a on-click="_sendForgotPassword" class="keyItem" style="border-color:dimgray;width:100%;">Resend Code</a>
                                        </div>
                                    </div>
                                </form>
                            </template>
                        </dom-if>
                        <dom-if if="[[_shouldShowSecurityQuestion]]">
                            <template>
                                <form class="security-form" on-keypress="_onQuestionKeypress">
                                    <center>
                                        <h2>SECURITY QUESTION</h2>
                                        <p>{{loginMessage}}</p>
                                        <p id="info">Looks like you're on a new device.<br />Please answer your security question.</p>
                                        <paper-input type="password" label="{{question}}" value={{answer}} required></paper-input>
                                    </center>
                                    <!--<paper-checkbox on-change="_onRememberChanged">Remember my answer</paper-checkbox>-->
                                    <div class="button-container">
                                        <button type="submit" on-click="_onQuestionSubmit">Sign In</button>
                                    </div>
                                    <div id="help">Need help? <a href="https://eggacy.com/#contact" target="_blank">Contact Us</a></div>
                                </form>
                            </template>
                        </dom-if>
                    </template>
                </dom-if>

                <dom-if if="[[user]]">
                    <template>
                        <div class="flex-child">
                            <paper-spinner-lite alt="Loading Dashboard" active></paper-spinner-lite>
                        </div>
                    </template>
                </dom-if>
            </div>
        </div>

    </template>

    <script>
        class EggLogin extends Polymer.Element {
            static get is() { return 'egg-login'; }

            static get properties() {
                return {
                    loggedIn: {
                        type: Boolean,
                        notify: true,
                    },
                    loading: {
                        type: Boolean,
                        notify: true,
                    },
                    user: {
                        type: Object,
                        notify: true,
                    },
                    email: {
                        type: String,
                        notify: true,
                    },
                    loginMessage: {
                        type: String,
                        value: "your life. your legacy.",
                    },
                    forgotMessage:{
                        type:String,
                        value:""
                    },
                    _shouldShowLogin: Boolean,
                    _shouldShowConfirm: Boolean,
                    _shouldShowForGotPassword: Boolean,
                    _shouldShowForGotPasswordVerification: Boolean,
                    _shouldShowSecurityQuestion: Boolean,
                    forgotEmail: {
                        type: String,
                        value: ''
                    },
                    code: {
                        type: String,
                        value: ''
                    },
                    question: {
                        type: String,
                        value: ''
                    },
                    answer: {
                        type: String,
                        value: ''
                    },
                    rememberAnswer: {
                        type: Boolean,
                        value: true//false
                    },
                    verificationCode: {
                        type: String,
                        value: ''
                    },
                    forgotPasswordString: {
                        type: String,
                        value: ''
                    },
                    forgotPasswordConfirm: {
                        type: String,
                        value: ''
                    },
                    question1: {
                        type: String,
                        value: ''
                    },
                    question2: {
                        type: String,
                        value: ''
                    },
                    answer1: {
                        type: String,
                        value: ''
                    },
                    answer2: {
                        type: String,
                        value: ''
                    },
                }
            }
            _authenticateUser(e) {
                e.preventDefault();
                let r = new CustomEvent('authenticate-user', {bubbles: true, composed: true, detail: {
                        email: this.email,
                        password: this.password
                    }});
                this.dispatchEvent(r);
            }

            _onLoginSuccess(e) {
                this.loginMessage = "your life. your legacy.";
                this.phone = '';
                this.email = "";
                this.confirmph = '';
                this.confirme = "";
                this.confirmp = "";
                this.password = "";
                this.code = "";
                this.question = '';
                this.answer = '';
            }

            _onLoginFailure(e) {
                if('MFARequired' === e.detail.code) {
                    this.dispatchEvent(new CustomEvent('prompt-mfa', {bubbles: true, composed: true, detail: {
                            email: this.email,
                            password: this.password
                        }}));
                }
            }
            _onLoginKeypress(e) {
                if(e.keyCode == 13 && this._shouldShowLogin) {
                    this._authenticateUser(e);
                }
            }


            _onClickJoinButton(e) {
                this._pushPage('registration-form');
            }

            _onForgotPassword(e){
                this._shouldShowForGotPassword = true;
                this._shouldShowLogin = false;
                this._shouldShowRegister = false;
            }

            _onForgotPasswordCancel(e){
                this._shouldShowForGotPassword = false;
                this._shouldShowLogin = true;
                this._shouldShowRegister = false;
                this._shouldShowForGotPasswordVerification = false;
            }

            _onForgotKeypress(e) {
                if(e.keyCode == 13 && this._shouldShowForGotPassword) {
                    this._sendForgotPassword(e);
                }
            }

            _sendForgotPassword(e){
                if(! this.$.forgotEmail) {
                    this.$.forgotEmail = this.shadowRoot.querySelector('#forgotEmail');
                }

                if(this.forgotEmail.trim() === '') {
                    this.$.forgotEmail.invalid = true;
                } else {
                    this.$.forgotEmail.invalid = false;
                    this.dispatchEvent(new CustomEvent('send-forgot-password' , {
                        bubbles:true,
                        composed:true,
                        detail:{
                            body:{
                                email: this.forgotEmail
                            },
                            callback: () =>{
                                this._shouldShowForGotPassword = false;
                                this._shouldShowLogin = false;
                                this._shouldShowRegister = false;
                                this._shouldShowForGotPasswordVerification = true;
                            }
                        }
                    }));
                }
            }

            _onPasswordConfirm(e){
                // assign to shadow
                var a = ['verificationCode', 'forgotPasswordString', 'forgotPasswordConfirm'], b;

                for(b in a) {
                    if(a.hasOwnProperty(b)) {
                        if(! this.$[a[b]]) {
                            this.$[a[b]] = this.shadowRoot.querySelector('#' + a[b]);
                        }

                        if(this.$[a[b]]) {
                            if(! this[a[b]] || (this[a[b]] && this[a[b]].trim() === '')) {
                                this.$[a[b]].invalid = true;
                                return;
                            } else {
                                this.$[a[b]].invalid = false;
                            }
                        }
                    }
                }

                if(this.forgotPasswordString === this.forgotPasswordConfirm){
                    this.dispatchEvent(new CustomEvent('forgot-password-confirm', {
                        bubbles:true,
                        composed:true,
                        detail:{
                            body:{
                                email: this.forgotEmail,
                                confirmCode: this.verificationCode,
                                password: this.forgotPasswordString,
                            },
                            callback: () => {
                                this._shouldShowLogin = true;
                                this._shouldShowForGotPassword = false;
                                this._shouldShowRegister = false;
                                this._shouldShowForGotPasswordVerification = false;
                                this.email = this.forgotEmail;
                                this.forgotEmail = "";
                            }
                        }
                    }));
                }else{
                    this.forgotMessage = "Password did not match. Try again!"
                }
            }

            _onPasswordConfirmCancel(e){
                this._shouldShowForGotPassword = true;
                this._shouldShowLogin = false;
                this._shouldShowRegister = false;
                this._shouldShowForGotPasswordVerification = false;
                this.question = e.detail.question;
            }

            _pushPage(page) {
                window.history.pushState({}, null, page);
                window.dispatchEvent(new CustomEvent('location-changed'));
            }

            startConfirm() {
                if(this.verificationCode.trim() !== '') {
                    history.replaceState(null,null,'login');
                    this.dispatchEvent(new CustomEvent('get-email', {bubbles: true, composed: true, detail: {
                            code: this.verificationCode,
                            status: {
                                1: (res) => {
                                    this.loginMessage = 'Check your email for the confirmation code.';
                                    this.email = res.response.data.email;

                                    this.dispatchEvent(new CustomEvent('activate-user', {bubbles: true, composed: true, detail: {
                                            email:  res.response.data.email,
                                            code: this.verificationCode,
                                            callback: () => {
                                                this.email = res.response.data.email;
                                                this.loginMessage = 'User account confirmed.';
                                            }
                                        }}));
                                }
                            }
                        }}));
                }
            }

            _onLoginMessage(e) {
                if(e.detail && e.detail.message) {
                    this.loginMessage = e.detail.message;
                }
            }

            _onLoginQuestion(e) {
                this._shouldShowForGotPassword = false;
                this._shouldShowLogin = false;
                this._shouldShowRegister = false;
                this._shouldShowForGotPasswordVerification = false;
                this._shouldShowSecurityQuestion = true;
                this.loginMessage = "your life. your legacy.";

                this.uuid = e.detail.uuid;
                this.question = e.detail.question;
                this.questionComplete = e.detail.complete;
            }

            /*_onRememberChanged(e) {
                this.rememberAnswer = e.target.checked;
            }*/

            _onQuestionKeypress(e) {
                if(e.keyCode == 13 && this._shouldShowSecurityQuestion) {
                    this._onQuestionSubmit(e);
                }
            }

            _onQuestionSubmit(e) {
                var polyDom = this;

                e.preventDefault();

                this._shouldShowSecurityQuestion = false;
                this.dispatchEvent(new CustomEvent('submit-question', {bubbles: true, composed: true, detail: {
                    body: {
                        email: this.email,
                        question: this.question,
                        answer: this.answer,
                        remember: this.rememberAnswer,
                        uuid: this.uuid
                    },
                    correct: function() {
                        polyDom.questionComplete();
                        polyDom.loginMessage = "your life. your legacy.";
                        polyDom._shouldShowLogin = true;
                        polyDom.rememberAnswer = false;
                    },
                    wrong: function() {
                        polyDom.loginMessage = 'The security question answer does not match our records.  Please verify and try again.';
                        polyDom._shouldShowSecurityQuestion = true;
                    }
                }}));

                this.answer = '';
            }

            constructor() {
                super();
                this.verificationCode = decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent("code").replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
                this._boundOnFailure = this._onLoginFailure.bind(this);
                this._boundOnSuccess = this._onLoginSuccess.bind(this);
                this._boundOnQuestion = this._onLoginQuestion.bind(this);
            }

            connectedCallback() {
                super.connectedCallback();
                window.addEventListener('login-failure', this._boundOnFailure);
                window.addEventListener('login-success', this._boundOnSuccess);
                window.addEventListener('login-message', e => this._onLoginMessage(e));
                window.addEventListener('login-question', this._boundOnQuestion);
                this._shouldShowLogin = true;
                this.startConfirm();
            }

            disconnectedCallback() {
                super.disconnectedCallback();
                window.removeEventListener('login-failure', this._boundOnFailure);
                window.removeEventListener('login-success', this._boundOnSuccess);
                window.removeEventListener('login-question', this._boundOnQuestion);
                this._shouldShowLogin = true;
            }
        }

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