// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
    <div class="login-area" @keyup.enter="onLogin">
        <div class="login-area__logo-wrapper">
            <LogoIcon class="logo" @click="onLogoClick"/>
        </div>
        <div class="login-area__content-area">
            <div class="login-area__content-area">
                <div class="login-area__content-area__activation-banner" :class="{'error': isActivatedError}" v-if="isActivatedBannerShown">
                    <p class="login-area__content-area__activation-banner__message">
                        <template v-if="!isActivatedError"><b>Success!</b> Account verified.</template>
                        <template v-else><b>Oops!</b> This account has already been verified.</template>
                    </p>
                </div>
                <div class="login-area__content-area__container">
                    <div class="login-area__content-area__container__title-area">
                        <h1 class="login-area__content-area__container__title-area__title">Sign In</h1>

                        <div class="login-area__expand" @click.stop="toggleDropdown">
                            <span class="login-area__expand__value">{{ satelliteName }}</span>
                            <BottomArrowIcon />
                            <div class="login-area__expand__dropdown" v-if="isDropdownShown" v-click-outside="closeDropdown">
                                <div class="login-area__expand__dropdown__item" @click.stop="closeDropdown">
                                    <SelectedCheckIcon />
                                    <span class="login-area__expand__dropdown__item__name">{{ satelliteName }}</span>
                                </div>
                                <a v-for="sat in partneredSatellites" class="login-area__expand__dropdown__item" :href="sat.address + '/login'">
                                    {{ sat.name }}
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="login-area__input-wrapper">
                        <HeaderlessInput
                            class="full-input"
                            label="Email Address"
                            placeholder="example@email.com"
                            :error="emailError"
                            @setData="setEmail"
                            height="46px"
                            width="calc(100% - 2px)"
                        />
                    </div>
                    <div class="login-area__input-wrapper">
                        <HeaderlessInput
                            class="full-input"
                            label="Password"
                            placeholder="Password"
                            :error="passwordError"
                            @setData="setPassword"
                            width="calc(100% - 2px)"
                            height="46px"
                            is-password="true"
                        />
                    </div>
                    <p class="login-area__content-area__container__button" @click.prevent="onLogin">Sign In</p>
                </div>
                <div class="login-area__content-area__forgot-container">
                    <p class="login-area__content-area__forgot-container__reset-msg">Forgot your sign in details?<router-link :to="forgotPasswordPath" class="login-area__content-area__forgot-container__link">
                        Reset Password
                    </router-link></p>
                    <router-link :to="registerPath" class="login-area__content-area__forgot-container__link register-link">
                        Need to create an account?
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import HeaderlessInput from '@/components/common/HeaderlessInput.vue';

import AuthIcon from '@/../static/images/AuthImage.svg';
import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
import SelectedCheckIcon from '@/../static/images/common/selectedCheck.svg';
import LogoIcon from '@/../static/images/dcs-logo.svg';

import { AuthHttpApi } from '@/api/auth';
import { RouteConfig } from '@/router';
import { PartneredSatellite } from '@/types/common';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AppState } from '@/utils/constants/appStateEnum';
import { Validator } from '@/utils/validation';

@Component({
    components: {
        HeaderlessInput,
        AuthIcon,
        BottomArrowIcon,
        SelectedCheckIcon,
        LogoIcon,
    },
})
export default class Login extends Vue {
    private email: string = '';
    private password: string = '';
    private authToken: string = '';
    private isLoading: boolean = false;
    private emailError: string = '';
    private passwordError: string = '';

    private readonly auth: AuthHttpApi = new AuthHttpApi();

    public readonly forgotPasswordPath: string = RouteConfig.ForgotPassword.path;
    public isActivatedBannerShown: boolean = false;
    public isActivatedError: boolean = false;

    // Tardigrade logic
    public isDropdownShown: boolean = false;

    public readonly registerPath: string = RouteConfig.Register.path;

    /**
     * Lifecycle hook after initial render.
     * Makes activated banner visible on successful account activation.
     */
    public mounted(): void {
        this.isActivatedBannerShown = !!this.$route.query.activated;
        this.isActivatedError = this.$route.query.activated === 'false';
    }

    /**
     * Reloads page.
     */
    public onLogoClick(): void {
        location.reload();
    }

    /**
     * Sets email string on change.
     */
    public setEmail(value: string): void {
        this.email = value;
        this.emailError = '';
    }

    /**
     * Sets password string on change.
     */
    public setPassword(value: string): void {
        this.password = value;
        this.passwordError = '';
    }

    /**
     * Name of the current satellite.
     */
    public get satelliteName(): string {
        return this.$store.state.appStateModule.satelliteName;
    }

    /**
     * Information about partnered satellites, including name and signup link.
     */
    public get partneredSatellites(): PartneredSatellite[] {
        return this.$store.state.appStateModule.partneredSatellites;
    }

    /**
     * Toggles satellite selection dropdown visibility (Tardigrade).
     */
    public toggleDropdown(): void {
        this.isDropdownShown = !this.isDropdownShown;
    }

    /**
     * Closes satellite selection dropdown (Tardigrade).
     */
    public closeDropdown(): void {
        this.isDropdownShown = false;
    }

    /**
     * Performs login action.
     * Then changes location to project dashboard page.
     */
    public async onLogin(): Promise<void> {
        if (this.isLoading) {
            return;
        }

        this.isLoading = true;

        if (!this.validateFields()) {
            this.isLoading = false;

            return;
        }

        try {
            this.authToken = await this.auth.token(this.email, this.password);
        } catch (error) {
            await this.$notify.error(error.message);
            this.isLoading = false;

            return;
        }

        await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
        this.isLoading = false;
        await this.$router.push(RouteConfig.ProjectDashboard.path);
    }

    /**
     * Validates email and password input strings.
     */
    private validateFields(): boolean {
        let isNoErrors = true;

        if (!Validator.email(this.email.trim())) {
            this.emailError = 'Invalid Email';
            isNoErrors = false;
        }

        if (!Validator.password(this.password)) {
            this.passwordError = 'Invalid Password';
            isNoErrors = false;
        }

        return isNoErrors;
    }
}
</script>

<style scoped lang="scss">
    .login-area {
        display: flex;
        flex-direction: column;
        font-family: 'font_regular', sans-serif;
        background-color: #f5f6fa;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 100%;
        overflow-y: scroll;

        &__logo-wrapper {
            text-align: center;
            margin-top: 70px;
        }

        &__divider {
            margin: 0 20px;
            height: 22px;
            width: 2px;
            background-color: #acbace;
        }

        &__input-wrapper {
            margin-top: 20px;
        }

        &__expand {
            display: flex;
            align-items: center;
            cursor: pointer;
            position: relative;

            &__value {
                font-size: 16px;
                line-height: 21px;
                color: #acbace;
                margin-right: 10px;
                font-family: 'font_normal', sans-serif;
                font-weight: 700;
            }

            &__dropdown {
                position: absolute;
                top: 35px;
                left: 0;
                background-color: #fff;
                z-index: 1000;
                border: 1px solid #c5cbdb;
                box-shadow: 0 8px 34px rgba(161, 173, 185, 0.41);
                border-radius: 6px;
                min-width: 250px;

                &__item {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding: 12px 25px;
                    font-size: 14px;
                    line-height: 20px;
                    color: #7e8b9c;
                    cursor: pointer;
                    text-decoration: none;

                    &__name {
                        font-family: 'font_bold', sans-serif;
                        margin-left: 15px;
                        font-size: 14px;
                        line-height: 20px;
                        color: #7e8b9c;
                    }

                    &:hover {
                        background-color: #f2f2f6;
                    }
                }
            }
        }

        &__link {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 191px;
            height: 44px;
            border: 2px solid #376fff;
            border-radius: 6px;
            color: #376fff;
            background-color: #fff;
            cursor: pointer;

            &:hover {
                background-color: #376fff;
                color: #fff;
            }
        }

        &__content-area {
            background-color: #f5f6fa;
            padding: 35px 20px 0 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: calc(100% - 55px);
            border-radius: 20px;

            &__activation-banner {
                padding: 20px;
                background-color: rgba(39, 174, 96, 0.1);
                border: 1px solid #27ae60;
                color: #27ae60;
                border-radius: 6px;
                width: 570px;
                margin-bottom: 30px;

                &.error {
                    background-color: #fff3f2;
                    border: 1px solid #e30011;
                    color: #e30011;
                }

                &__message {
                    font-size: 16px;
                    line-height: 21px;
                    margin: 0;
                }
            }

            &__container {
                display: flex;
                flex-direction: column;
                padding: 60px 80px;
                background-color: #fff;
                min-width: 450px;
                min-height: 345px;
                border-radius: 20px;

                &__title-area {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    &__title {
                        font-size: 24px;
                        line-height: 49px;
                        letter-spacing: -0.100741px;
                        color: #252525;
                        font-family: 'font_normal', sans-serif;
                        font-weight: 800;
                    }

                    &__satellite {
                        font-size: 16px;
                        line-height: 21px;
                        color: #848484;
                    }
                }

                &__button {
                    font-family: 'font_normal', sans-serif;
                    font-weight: 700;
                    margin-top: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #376fff;
                    border-radius: 50px;
                    color: #fff;
                    cursor: pointer;
                    width: 100%;
                    height: 48px;

                    &:hover {
                        background-color: #0059d0;
                    }
                }
            }

            &__forgot-container {
                width: 100%;
                align-items: center;
                justify-content: center;
                margin-top: 50px;
                display: block;
                text-align: center;

                &__link {
                    font-family: 'font_medium', sans-serif;
                    text-decoration: none;
                    font-size: 14px;
                    line-height: 18px;
                    color: #376fff;
                }

                &__link.register-link {
                    top: 20px;
                    position: relative;
                }

                &__reset-msg {
                    font-size: 14px;
                    line-height: 18px;
                }
            }

            &__footer {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                margin-top: 140px;
                width: 100%;

                &__copyright {
                    font-size: 12px;
                    line-height: 18px;
                    color: #384b65;
                    padding-bottom: 20px;
                }

                &__link {
                    font-size: 12px;
                    line-height: 18px;
                    margin-left: 30px;
                    color: #376fff;
                    text-decoration: none;
                }
            }
        }
    }

    .logo {
        cursor: pointer;
    }

    .input-wrap.full-input {
        width: calc(100% - 2px);
    }

    @media screen and (max-width: 750px) {

        .login-area {

            &__header {
                padding: 10px 20px;
                width: calc(100% - 40px);
            }

            &__content-area {
                width: 90%;
                margin: 0 auto;

                &__container {
                    min-width: 80%;
                }
            }

            &__expand {

                &__dropdown {
                    left: -200px;
                }
            }
        }
    }

    @media screen and (max-width: 414px) {

        .login-area {

            &__logo-wrapper {
                margin-top: 40px;
            }

            &__content-area {
                padding: 30px 20px 0 20px;

                &__container {
                    padding: 20px 25px;
                    min-width: 90%;
                }
            }
        }
    }

    @media screen and (max-width: 375px) {

        .login-area {

            &__content-area {
                padding: 0 20px 100px 20px;

                &__container {
                    background: transparent;
                    min-width: 100%;
                }
            }
        }
    }
</style>
