<template>
    <nb-container>
        <nb-content class="sidebar-content-wrapper" :bounces="false">
            <nb-content class="sidebar-top">
                <nb-button
                        class="logout-btn"
                        transparent
                        light
                        :onPress="logout"
                >
                    <nb-icon class="logout-icon" name="log-out"/>
                </nb-button>

                <nb-grid class="user-info-wrapper">
                    <nb-col class="user-avatar-wrapper">
                        <nb-thumbnail class="user-avatar" square :source="{ uri: user.avatar }"></nb-thumbnail>
                    </nb-col>

                    <nb-col class="user-info">
                        <nb-text class="user-name">{{ user.name }}</nb-text>
                        <nb-text class="user-login">@{{ user.login }}</nb-text>
                    </nb-col>

                </nb-grid>

                <image-background
                    :source="drawerCover"
                    class="drawer-cover"
                    :style="stylesObj.drawerCoverObj"
                />
            </nb-content>

            <nb-list>
                <nb-list-item
                    v-for="data in datas"
                    :key="data.route"
                    button
                    noBorder
                    :onPress="() => handleListItemClick(data)"
                >
                    <nb-left>
                        <nb-icon
                            active
                            :name="data.icon"
                            :style="{ color: '#777', fontSize: 26, width: 30 }"
                        />

                        <nb-text>
                            {{ data.name }}
                        </nb-text>
                    </nb-left>

                    <nb-right v-if="data.types" :style="{ flex: 1 }">
                        <nb-badge
                            class="list-item-badge-container"
                            :style="{ backgroundColor: data.bg }"
                        >
                            <nb-text
                                class="list-item-badge-text"
                                :style="stylesObj.badgeText"
                            >
                                {{ `${data.types} Types` }}
                            </nb-text>
                        </nb-badge>
                    </nb-right>
                </nb-list-item>
            </nb-list>
        </nb-content>
    </nb-container>
</template>

<script>
    import { Dimensions, Platform } from "react-native";

    import drawer_cover_morning from "../../assets/greetings-splashes/greetings-morning.jpg";
    import drawer_cover_day from "../../assets/greetings-splashes/greetings-day.jpg";
    import drawer_cover_evening from "../../assets/greetings-splashes/greetings-evening.jpg";
    import drawer_cover_night from "../../assets/greetings-splashes/greetings-night.jpg";

    const deviceHeight = Dimensions.get("window").height;
    const deviceWidth = Dimensions.get("window").width;

    import store from "../store";

    export default {
        name: 'SideBar',
        props: {
            navigation: {
                type: Object
            }
        },
        data() {
            return {
                drawerCover: null,
                stylesObj: {
                    drawerCoverObj: {
                        height: deviceHeight / 3.5
                    },
                    badgeText: {
                        fontSize: Platform.OS === "android" ? 11 : 13,
                        marginTop: Platform.OS === "android" ? -3 : 0,
                        fontWeight: "700"
                    }
                },
                datas: [
                    {
                        name: "Расписание",
                        route: "Lessons",
                        icon: "school",
                    },
                    {
                        name: "Звонки",
                        route: "Calls",
                        icon: "notifications",
                    },
                    {
                        name: "Домашка",
                        route: "Homework",
                        icon: "home"
                    },
                    {
                        name: "Долги по учебе",
                        route: "Homework",
                        icon: "home",
                        bg: "#477EEA",
                        types: "5 долгов"
                    },
                    {
                        name: "Настройки",
                        route: "Settings",
                        icon: "settings",
                    },
                ],
                user: Object,
            };
        },
        mounted() {
            this.user = store.state.userObj;
            this.setDrawerCover();
        },
        methods: {
            handleListItemClick(dataObj) {
                this.navigation.navigate(dataObj.route);
            },
            setDrawerCover() {
                let currentDate = new Date(),
                    hours = currentDate.getHours();
                console.log(hours);

                if (hours >= 6 && hours <= 10) {
                    this.drawerCover = drawer_cover_morning
                } else if (hours >= 11 && hours <= 16) {
                    this.drawerCover = drawer_cover_day
                } else if (hours >= 17 && hours <= 21) {
                    this.drawerCover = drawer_cover_evening
                } else {
                    this.drawerCover = drawer_cover_night
                }
            },
            logout() {
                store.dispatch('LOGOUT', () => this.resetAction());
            },
            resetAction() {
                this.$props.navigation.reset({
                    index: 0,
                    actions: [this.$props.navigation.navigate('Login')]
                });
            }
        }
    };
</script>

<style>
    .sidebar-content-wrapper {
        flex: 1;
        background-color: #fff;
    }

    .list-item-badge-container {
        border-radius: 3px;
        height: 25px;
        width: 75px;
    }

    .list-item-badge-text {
        font-weight: 700;
        text-align: center;
        line-height: 30px;
    }

    .sidebar-top {
        position: relative;
    }
    
    .logout-btn {
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 10px;
    }

    .logout-icon {
        font-size: 30px;
        color: #fff;
    }

    .user-info-wrapper {
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 1;
    }

    .user-avatar-wrapper {
        width: 25%;
    }

    .user-avatar {
        border-radius: 10px;
    }

    .user-info {
        align-self: center;
    }

    .user-name {
        font-size: 18px;
        font-weight: 800;
        color: #fff;
    }

    .user-login {
        font-style: italic;
        color: #fff;
    }
</style>