<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-form>

            <nb-content padder>
                <nb-button
                    class="button"
                    block
                    primary
                    :onPress="editCall"
                >
                    <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: 'EditCall',
        components: {
            Header,
        },
        props: {
            navigation: Object
        },
        data() {
            return {
                call: {
                    beginning: '',
                    ending: '',
                    break_time: ''
                },
                editableCall: Object,
                validationError: {
                    beginning: false,
                    ending: false,
                    break_time: false,
                },
                loading: false,
                date: new Date()
            }
        },
        mounted() {
            this.editableCall = this.navigation.getParam('editableCall');

            console.log(this.navigation.getParam('editableCall'))

            this.call.beginning = this.editableCall.beginning;
            this.call.ending = this.editableCall.ending;
            this.call.break_time = this.editableCall.break_time;
        },
        methods: {
            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 editCall() {
                this.loading = true;

                let response = await this.$plugins.f(
                    `call/${this.editableCall.id}`,
                    'PATCH',
                    store.state.userObj.api_token,
                    JSON.stringify(this.call),
                    true
                );

                console.log(response)

                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>