<template lang="pug">
    .content
        .logo-box Memory Game
        .form-box
            .form-title Log in to play
            form(@submit.prevent="handleSubmit")
                .input-box
                    .input-icon
                        MdFace
                    input(type="text" v-model="name" placeholder="Name" :maxlength="16" :disabled="isFetching")
                .input-box
                    .input-icon
                        MdLock
                    input(type="password" v-model="password" placeholder="Password" :disabled="isFetching")
                transition(name="fade")
                    .input-box.email-box(v-if="canEnterEmail")
                        .input-icon
                            MdEmail
                        input(type="text" v-model="email" placeholder="E-mail" :disabled="isFetching")
                PulseLoader.pulse(v-if="isFetching" size="8px" color="#181818")
                transition(name="fade")
                    .button-box(v-if="isPasswordEntered && isNameEntered && !isFetching")
                        .input-box
                            input.sign-in(type="submit" value="Submit" :disabled="isDisabled")
                        .input-box
                            .sign-up(@click="toggleSignUp") {{ signUpText }}
</template>


<script>
    import Validator from '@/utils/Validator';

    import MdFace from '@/assets/icons/MdFace';
    import MdLock from '@/assets/icons/MdLock';
    import MdEmail from '@/assets/icons/MdEmail';

    export default {
        name: 'home',
        data() {
            return {
                isJoining: false,
                isFetching: false,
                name: '',
                password: '',
                email: '',
                signUpText: 'Create account'
            }
        },
        components: {
            MdFace,
            MdLock,
            MdEmail
        },
        computed: {
            isNameEntered() {
                return this.name.length > 3;
            },
            isPasswordEntered() {
                return this.password.length > 4;
            },
            canEnterEmail() {
                return this.isJoining && this.isNameEntered && this.isPasswordEntered;
            },
            isDisabled() {
                return this.isJoining && !Validator.validateEmail(this.email) || this.isFetching;
            },
        },
        methods: {
            handleSubmit() {
                if (this.isFetching) return;
                this.isFetching = true;
            },
            toggleSignUp() {
                if (this.isJoining)
                    this.signUpText = 'Sign up';
                else
                    this.signUpText = 'I have an account';
                return this.isJoining = !this.isJoining;
            }
        }
    }
</script>

<style scoped>

    .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

    .logo-box {
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
        font-weight: bold;
    }

    .form-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
    }

    .form-title {
        margin-bottom: .5rem;
    }

    form {
        color: var(--dec-p);
        background-color: var(--bg-p);
        width: 20rem;
        height: 20rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        -webkit-box-shadow: 6px 6px 6px -3px rgba(0,0,0,0.3);
        -moz-box-shadow: 6px 6px 6px -3px rgba(0,0,0,0.3);
        box-shadow: 6px 6px 6px -3px rgba(0,0,0,0.3);
    }

    .input-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: row;
        margin-bottom: .5rem;
    }

    .input-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: .2rem;
    }

    input {
        background-color: var(--bg-d);
    }

    input[type="text"], input[type="password"] {
        border: 2px solid var(--bg-p);
    }

    input[type="text"]:focus, input[type="password"]:focus {
        border: 2px solid var(--dec-p);
    }

    .button-box {
        width: 100%;
        display: flex;
        flex-flow: row;
        justify-content: space-evenly;
        margin-top: .5rem;
    }

    input[type="submit"] {
        width: 5rem;
    }

    .sign-in {
        height: 2rem;
        color: var(--bg-p);
        background-color: var(--dec-p);
    }


    .sign-in:hover {
        background-color: var(--dec-d);
    }

    .sign-up {
        height: 2rem;
        width: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: var(--bg-p);
        font-size: .8rem;
        text-align: center;
    }

    .sign-up:hover {
        background-color: var(--bg-d);
    }

    .fade-enter-active {
        transition: opacity 500ms;
    }

    .fade-leave-active {
        transition: opacity 0;
    }

    .fade-enter, .fade-leave-to {
        opacity: 0;
    }

    :disabled {
        cursor: not-allowed;
    }

    .pulse {
        margin-top: 1rem;
    }

</style>