<template>
    <nb-container class="container">
        <image-background class="splash-image" :source="splashImage" />

        <nb-content class="logo-wrapper">
            <nb-text class="logo">место для лого</nb-text>
        </nb-content>

        <nb-content class="greetings-wrapper">
            <nb-h1 class="greetings-text">{{ greetingsText }}, {{ userObj.name }}!</nb-h1>
        </nb-content>

        <nb-content class="spinner-wrapper">
            <nb-spinner class="spinner" color="#fff"/>
        </nb-content>
    </nb-container>
</template>

<script>
    import { Animated, Easing, StatusBar } from "react-native";

    import greetings_morning from "../../assets/greetings-splashes/greetings-morning.jpg";
    import greetings_day from "../../assets/greetings-splashes/greetings-day.jpg";
    import greetings_evening from "../../assets/greetings-splashes/greetings-evening.jpg";
    import greetings_night from "../../assets/greetings-splashes/greetings-night.jpg";

    import store from "../store";

    export default {
        name: "Greetings",
        props: {
            navigation: { type: Object }
        },
        computed: {
            loggingIn() {
                return store.state.logging_in;
            }
        },
        created() {
            this.animation.opacity = new Animated.Value(0);
        },
        mounted(animation) {
            StatusBar.setHidden(true, animation);

            this.animate();

            this.sayHello();
            this.userObj = this.navigation.getParam('userObj');
            this.action = this.navigation.getParam('action');
            (this.action === 'set_user') ? this.setUser() : this.authenticate();
        },
        data() {
            return {
                splashImage: null,
                greetingsText: "",
                userObj: Object,
                action: String,
                animation: {
                    opacity: 0
                }
            }
        },
        methods: {
            sayHello() {
                let currentDate = new Date(),
                    hours = currentDate.getHours();
                console.log(hours);

                if (hours >= 6 && hours <= 10) {
                    this.greetingsText = "Доброе утро";
                    this.splashImage = greetings_morning
                } else if (hours >= 11 && hours <= 16) {
                    this.greetingsText = "Добрый день";
                    this.splashImage = greetings_day
                } else if (hours >= 17 && hours <= 21) {
                    this.greetingsText = "Добрый вечер";
                    this.splashImage = greetings_evening
                } else {
                    this.greetingsText = "Доброй ночи";
                    this.splashImage = greetings_night
                }

                console.log(this.greetings)
            },
            setUser() {
                store.dispatch('SET_USER', { userObj: this.userObj }).then(() => this.navigation.navigate('Drawer'))
            },
            authenticate() {
                store.dispatch('LOGIN', {
                    userObj: this.userObj,
                    navigate: this.navigation.navigate
                }).then(() => this.navigation.navigate('Drawer'));
            },
            animate() {
                this.animation.opacity.setValue(0);

                Animated.timing(this.animation.opacity, {
                    toValue: 1,
                    duration: 1000,
                    easing: Easing.linear
                }).start()

                this.animation.opacity.interpolate({
                    inputRange: [0, 0.5, 1],
                    outputRange: [1, 0, 1]
                });
            }
        }
    }
</script>

<style scoped>
    .splash-image {
        flex: 1;
    }

    .logo-wrapper {
        position: absolute;
        z-index: 1;
        top: 50px;
        left: 0;
        width: 100%;
    }

    .logo {
        color: #fff;
        text-align: center;
    }

    .greetings-wrapper {
        position: absolute;
        top: 200px;
        left: 0;
        width: 100%;
        z-index: 1;
    }

    .greetings-text {
        color: #fff;
        text-align: center;
    }

    .spinner-wrapper {
        position: absolute;
        bottom: 150px;
        width: 100%;
    }

    .spinner {
        align-self: center;
    }
</style>