<template>
    <nb-container class="container">
        <gradient-background class="bg" :gradient="['#512DA8', '#673AB7']"></gradient-background>

        <logo class="logo" width="20" height="20" icon-name="logo" icon-color="#fff"/>

        <nb-content class="content">
            <nb-form>
                <nb-content padder>
                    <nb-item>
                        <nb-icon class="input-icon" active name="log-in"/>

                        <nb-input
                            class="form-input"
                            v-model="userData.login"
                            placeholder="Логин"
                            placeholderTextColor="#fff"
                            auto-capitalize="none"
                        />
                    </nb-item>

                    <nb-item>
                        <nb-icon class="input-icon" active name="lock"/>

                        <nb-input
                            class="form-input"
                            v-model="userData.password"
                            placeholder="Пароль"
                            placeholderTextColor="#fff"
                            auto-capitalize="none"
                            :secure-text-entry="passwordMask"
                        />

                        <nb-icon
                            class="input-icon"
                            active
                            :name="(passwordMask) ? 'eye' : 'eye-off'"
                            :onPress="togglePasswordMask"
                        />
                    </nb-item>
                </nb-content>
            </nb-form>

            <nb-content padder>
                <form-button
                    :gradient="['#a044ff', '#8c43ea']"
                    :waiting="logging_in"
                    :action="login"
                    title="Войти"
                />
            </nb-content>

            <nb-grid class="links-wrapper">
                <nb-text
                    class="link"
                    :onPress="() => this.props.navigation.navigate('Register')"
                >
                    Создать аккаунт
                </nb-text>

                <nb-text
                    class="link"
                    :onPress="toast"
                >
                    Забыли пароль?
                </nb-text>
            </nb-grid>
        </nb-content>
    </nb-container>
</template>

<script>
    import { StatusBar } from "react-native";
    import * as SecureStore from "expo-secure-store";
    import { SplashScreen } from "expo";

    import { Toast } from "native-base";

    import GradientBackground from "../../components/GradientBackground";
    import FormButton from "../../components/Form/FormButton";
    import Logo from "../../components/Logo";

    export default {
        name: 'Login',
        components: {
            GradientBackground,
            FormButton,
            Logo
        },
        props: {
            navigation: { type: Object }
        },
        data() {
            return {
                userData: {
                    login: '',
                    password: ''
                },
                passwordMask: true,
                logging_in: false,
                login_error: false
            }
        },
        async created() {
            await this.checkAuth();
        },
        mounted(hidden, animation) {
            StatusBar.setHidden(false, animation);
        },
        methods: {
            async login() {
                this.logging_in = true;
                this.login_error = false;

                let response = await this.$plugins.f('login', 'POST', JSON.stringify(this.userData), true);

                console.log(response);

                if (response.status) {
                    await this.navigation.navigate('Greetings', {
                        userObj: response.user,
                        action: 'authenticate'
                    });
                } else {
                    this.login_error = true;

                    Toast.show({
                        text: "Введен неверный логин или пароль",
                        buttonText: "Закрыть",
                        type: "danger",
                        duration: 5000
                    });
                }

                this.logging_in = false;
            },
            checkAuth() {
                SecureStore.getItemAsync('user').then((value) => {
                    if (value) {
                        this.$props.navigation.navigate('Greetings', {
                            userObj: JSON.parse(value),
                            action: 'set_user'
                        });
                        console.log('logged');
                    } else {
                        console.log(':(')
                    }
                    setTimeout(() => {
                        SplashScreen.hide();
                    }, 100);

                })
            },
            togglePasswordMask() {
                this.passwordMask = !this.passwordMask;
            },
            toast() {
                Toast.show({
                    text: 'ха-ха, лоооох!',
                    buttonText: 'Закрыть',
                    type: 'warning',
                    duration: 5000
                })
            }
        }
    }
</script>

<style scoped>
    .form-input {
        font-size: 18px;
        color: #fff;
        margin-top: 10px;
    }

    .input-icon {
        font-size: 26px;
        color: #fff;
        margin-top: 10px;
    }

    .links-wrapper {
        margin-top: 20px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }

    .link {
        font-weight: 700;
        color: #fff;
    }

    .content {
        flex: 1;
        margin-top: 50%;
    }

    .logo {
        position: absolute;
        top: 50px;
        width: 75px;
        height: 100px;
        align-self: center;
    }
</style>