<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: 'md-swap'
            }"
            :week="{
                show: true,
                type: (this.currentWeek === 'even') ? 'Ч' : 'Н'
            }"
        />

        <nb-tabs :initialPage="day" :renderTabBar="renderTabs">
            <nb-tab heading="ПН">
                <daily-schedule></daily-schedule>
            </nb-tab>

            <nb-tab heading="ВТ">
                <daily-schedule></daily-schedule>
            </nb-tab>

            <nb-tab heading="СР">

            </nb-tab>

            <nb-tab heading="ЧТ">

            </nb-tab>

            <nb-tab heading="ПТ">

            </nb-tab>

            <nb-tab heading="СБ">

            </nb-tab>
        </nb-tabs>

        <nb-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 } from "native-base";
    import { StatusBar } from "react-native";

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

    import DailySchedule from "./DailyScheduleScreen";

    export default {
        name: 'Lessons',
        props: {
            navigation: { type: Object }
        },
        components: {
            Header,
            DailySchedule
        },
        data() {
            return {
                stylesObj: {
                    fabContainer: {
                        position: "bottomRight"
                    }
                },
                day: new Date().getDay() - 1,
                currentWeek: 'even'
            }
        },
        mounted(hidden, animation) {
            StatusBar.setHidden(false, animation)
        },
        methods: {
            renderTabs() {
                return <ScrollableTab />;
            }
        }
    }
</script>