<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: 'refresh',
                action: updateCalls
            }"
            :right-second-button="{
                show: false,
            }"
            :week="{
                show: false
            }"
        />

        <nb-tabs :initialPage="day" :renderTabBar="renderTabs">
            <nb-tab :tabStyle="{width: '50%'}" :activeTabStyle="{width: '50%'}" heading="Будние дни">
                <daily-schedule
                    type="call"
                    :data="calls.weekday"
                    :navigation="navigation"
                />
            </nb-tab>

            <nb-tab :tabStyle="{width: '50%'}" :activeTabStyle="{width: '50%'}" heading="Субботы">
                <daily-schedule
                    type="call"
                    :data="calls.saturday"
                    :navigation="navigation"
                />
            </nb-tab>
        </nb-tabs>

        <nb-fab
            v-if="userGroup === 'moder' || userGroup === 'admin'"
            class="fab"
            direction="up"
            position="bottomRight"
            :onPress="() => navigation.navigate('AddCall')"
        >
            <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 Header from "../../components/Header";
    import DailySchedule from "../../components/DailySchedule";

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

    export default {
        name: 'Calls',
        props: {
            navigation: { type: Object }
        },
        components: {
            Header,
            DailySchedule
        },
        data() {
            return {
                day: Number,
                userGroup: store.state.userGroup,
            }
        },
        computed: {
            calls() {
                console.log(store.state.calls)
                return store.state.calls;
            }
        },
        created() {
            this.setDay();
        },
        methods: {
            renderTabs() {
                return <ScrollableTab />;
            },
            setDay() {
                this.day = new Date().getDay() - 1;
                this.day = (this.day === 5) ? 1 : 0;
            },
            updateCalls() {
                store.commit('FETCHING_DATA');

                this.$plugins.f('call', 'GET', store.state.userObj.api_token).then(response => {
                    if (response.body.status) {
                        store.dispatch('SET_CALLS', { calls: 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>