<template>
    <nb-container>
        <Header
            title="Расписание занятий"
            :navigation="this.props.navigation"
            :left-button="{
                show: true,
                icon: 'menu',
                action: () => this.props.navigation.openDrawer()
            }"
            :right-button="{
                show: true,
                icon: 'swap',
                action: swapWeek
            }"
            :right-second-button="{
                show: true,
                icon: 'refresh',
                action: updateLessons
            }"
            :week="{
                show: true,
                type: (currentWeek === 'even') ? 'Ч' : 'Н'
            }"
        />

        <nb-tabs :initialPage="day" :renderTabBar="renderTabs">
            <nb-tab heading="ПН">
                <daily-schedule
                    type="lesson"
                    :data="lessons[`${currentWeek}_week`].monday"
                    :navigation="navigation"
                />
            </nb-tab>

            <nb-tab heading="ВТ">
                <daily-schedule
                    type="lesson"
                    :data="lessons[`${currentWeek}_week`].tuesday"
                    :navigation="navigation"
                />
            </nb-tab>

            <nb-tab heading="СР">
                <daily-schedule
                    type="lesson"
                    :data="lessons[`${currentWeek}_week`].wednesday"
                    :navigation="navigation"
                />
            </nb-tab>

            <nb-tab heading="ЧТ">
                <daily-schedule
                    type="lesson"
                    :data="lessons[`${currentWeek}_week`].thursday"
                    :navigation="navigation"
                />
            </nb-tab>

            <nb-tab heading="ПТ">
                <daily-schedule
                    type="lesson"
                    :data="lessons[`${currentWeek}_week`].friday"
                    :navigation="navigation"
                />
            </nb-tab>

            <nb-tab heading="СБ">
                <daily-schedule
                    type="lesson"
                    :data="lessons[`${currentWeek}_week`].saturday"
                    :navigation="navigation"
                />
            </nb-tab>
        </nb-tabs>

        <nb-fab
            v-if="userGroup === 'moder' || userGroup === 'admin'"
            class="fab"
            direction="up"
            position="bottomRight"
            :onPress="() => navigation.navigate('AddLesson')"
        >
            <nb-icon-nb name="md-add"></nb-icon-nb>
        </nb-fab>
    </nb-container>
</template>

<script>
    import React from "react";
    import { ScrollableTab, Toast } from "native-base";
    import { StatusBar } from "react-native";

    import Header from "../../components/Header";

    import DailySchedule from "../../components/DailySchedule";

    import store from "../../store";

    export default {
        name: 'Lessons',
        props: {
            navigation: { type: Object }
        },
        components: {
            Header,
            DailySchedule
        },
        data() {
            return {
                day: Number,
                currentWeek: 'even',
                userGroup: store.state.userGroup,
            }
        },
        computed: {
            lessons() {
                return store.state.lessons;
            }
        },
        created() {
            this.setDay();
        },
        mounted(hidden, animation) {
            StatusBar.setHidden(false, animation);
        },
        methods: {
            renderTabs() {
                return <ScrollableTab />;
            },
            setDay() {
                this.day = new Date().getDay() - 1;
                this.day = (this.day === 6) ? 0 : this.day;
                console.log(this.day)
            },
            swapWeek() {
                this.currentWeek = (this.currentWeek === 'even') ? 'uneven' : 'even';
            },
            updateLessons() {
                store.commit('FETCHING_DATA');

                this.$plugins.f('lesson', 'GET', store.state.userObj.api_token).then(response => {
                    if (response.body.status) {
                        store.dispatch('SET_LESSONS', { lessons: response.body.schedule }).then(() => {
                            Toast.show({
                                text: "Расписание успешно обновлено",
                                buttonText: "ОК",
                                type: "success",
                                duration: 2000
                            });
                        });
                    } else {
                        Toast.show({
                            text: "Произошла непредвиденная ошибка при обновлении",
                            buttonText: "Закрыть",
                            type: "danger",
                            duration: 5000
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .fab {
        background-color: #673AB7;
    }
</style>