<template>
    <nb-container>
        <Header
            title="Добавить"
            :navigation="this.props.navigation"
            :left-button="{
                show: true,
                icon: 'md-arrow-back',
                action: () => this.props.navigation.goBack()
            }"
            :right-button="{
                show: false
            }"
            :right-second-button="{
                show: false
            }"
        />

        <nb-content>
            <nb-form>
                <nb-separator bordered>
                    <nb-text>Информация о времени</nb-text>
                </nb-separator>

                <nb-content padder>
                    <nb-item
                        class="time-picker"
                        stackedLabel
                    >
                        <nb-label>Начало занятия</nb-label>

                        <nb-button transparent :onPress="() => openTimePicker('beginning')">
                            <nb-text>{{ call.beginning }}</nb-text>
                        </nb-button>
                    </nb-item>
                </nb-content>

                <nb-content padder>
                    <nb-item class="time-picker" stackedLabel>
                        <nb-label>Окончание занятия</nb-label>

                        <nb-button transparent :onPress="() => openTimePicker('ending')">
                            <nb-text>{{ call.ending }}</nb-text>
                        </nb-button>
                    </nb-item>
                </nb-content>

                <nb-content padder>
                    <nb-item stackedLabel>
                        <nb-label>Длительность перемены (в минутах)</nb-label>
                        <nb-input v-model="call.break_time"/>
                    </nb-item>
                </nb-content>

                <nb-separator bordered>
                    <nb-text>Тип дня</nb-text>
                </nb-separator>

                <nb-list-item
                    :selected="call.type === 1"
                    :onPress="() => call.type = 1"
                    last
                >
                    <nb-left>
                        <nb-text>Будний день</nb-text>
                    </nb-left>

                    <nb-right>
                        <nb-radio :selected="call.type === 1" />
                    </nb-right>
                </nb-list-item>

                <nb-list-item
                    :selected="call.type === 2"
                    :onPress="() => call.type = 2"
                    last
                >
                    <nb-left>
                        <nb-text>Суббота</nb-text>
                    </nb-left>

                    <nb-right>
                        <nb-radio :selected="call.type === 2"/>
                    </nb-right>
                </nb-list-item>
            </nb-form>

            <nb-content padder>
                <nb-button
                    class="button"
                    block
                    primary
                    :onPress="addCall"
                >
                    <nb-spinner v-if="loading" color="#fff"></nb-spinner>
                    <nb-text v-if="!loading">Добавить</nb-text>
                </nb-button>
            </nb-content>
        </nb-content>
    </nb-container>
</template>

<script>
    import React from "react";
    import RNDateTimePicker from "@react-native-community/datetimepicker";
    import { Toast } from "native-base";

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

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

    export default {
        name: 'AddCall',
        components: {
            Header,
        },
        data() {
            return {
                call: {
                    beginning: this.getCurrentTime(),
                    ending: this.getCurrentTime(),
                    break_time: '',
                    type: 1,
                },
                validationError: {
                    beginning: false,
                    ending: false,
                    break_time: false,
                },
                loading: false,
                date: new Date()
            }
        },
        methods: {
            getCurrentTime() {
                let date = new Date(),
                    hours = date.getHours(),
                    minutes = date.getMinutes();

                if (hours < 10) hours = `0${hours}`;
                if (minutes < 10) minutes = `0${minutes}`;

                return `${hours}:${minutes}`;
            },
            openTimePicker(type) {
                const timePicker = RNDateTimePicker({
                    mode: 'time',
                    display: 'default',
                    value: new Date(),
                    is24Hour: true,
                    onChange: (event, date, timeType = type) => this.setTime(event, date, timeType)
                });
            },
            setTime(event, date, type) {
                let hours = date.getHours(),
                    minutes = date.getMinutes();

                if (hours < 10) hours = `0${hours}`;
                if (minutes < 10) minutes = `0${minutes}`;

                if (type === 'beginning') {
                    this.call.beginning = `${hours}:${minutes}`;
                } else {
                    this.call.ending = `${hours}:${minutes}`;
                }
            },
            async addCall() {
                this.loading = true;

                let response = await this.$plugins.f(
                    'call',
                    'POST',
                    store.state.userObj.api_token,
                    JSON.stringify(this.call),
                    true
                );

                console.log(this.call.break_time)

                if (response.body.status) {
                    Toast.show({
                        text: "Звонок успешно добавлен",
                        buttonText: "ОК",
                        type: "success",
                        duration: 3000
                    });
                } else {
                    Toast.show({
                        text: "Произошла ошибка, проверьте правильность заполнения полей!",
                        buttonText: "Закрыть",
                        type: "danger",
                        duration: 3000
                    });
                }

                this.loading = false;
            },
        }
    }
</script>

<style scoped>
    .button {
        margin-top: 20px;
    }

    .time-picker {
        align-items: stretch;
    }
</style>