import {Toast} from "native-base";
<template>
    <nb-list-item thumbnail>
        <nb-left>
            <nb-text class="schedule-item-number">{{ itemNumber }}.</nb-text>
        </nb-left>

        <nb-body v-if="type === 'lesson'">
            <nb-text>{{ data.name }}</nb-Text>
            <nb-text v-if="data.audience !== null" note :numberOfLines="1">Аудитория: {{ data.audience }}</nb-text>
            <nb-text v-if="data.audience === null" note :numberOfLines="1">Можно спать :)</nb-text>
        </nb-body>

        <nb-body v-if="type === 'call'">
            <nb-text>{{ data.beginning }} - {{ data.ending }}</nb-Text>
            <nb-text note :numberOfLines="1">Перемена: {{ data.break_time }} минут</nb-text>
        </nb-body>

        <nb-right
                v-if="userGroup === 'moder' ||
                      userGroup === 'admin'"
        >
            <nb-button transparent :onPress="openMenu">
                <nb-icon name="more"/>
            </nb-button>
        </nb-right>
    </nb-list-item>
</template>

<script>
    import { Alert } from "react-native";
    import { ActionSheet, Toast } from "native-base";

    import store from "../store";

    export default {
        name: "ScheduleItem",
        props: {
            navigation: Object,
            type: String,
            data: Object,
            itemNumber: Number
        },
        data() {
            return {
                btnOptions: [
                    { text: "Изменить", icon: "create", iconColor: "#673AB7", action: () => this.editItem() },
                    { text: "Удалить", icon: "trash", iconColor: "#fa213b", action: () => this.openDeleteDialog() },
                    { text: "Отмена", icon: "close", iconColor: "#673AB7", action: () => console.log('Canceled') }
                ],
                clicked: 0,
                optionCancelIndex: 2,
                optionDestructiveIndex: 1,
                userGroup: store.state.userGroup
            }
        },
        methods: {
            openMenu() {
                ActionSheet.show(
                    {
                        options: this.btnOptions,
                        cancelButtonIndex: this.optionCancelIndex,
                        destructiveButtonIndex: this.optionDestructiveIndex,
                        title: "Выберите действие"
                    },
                    buttonIndex => {
                        this.clicked = this.btnOptions[buttonIndex];

                        this.clicked.action();
                    }
                );
            },
            openDeleteDialog() {
                Alert.alert(
                    'Подтвердите действие',
                    'Вы действительно хотите удалить данный элемент из расписания?',
                    [
                        { text: 'Да', onPress: () => this.deleteItem() },
                        { text: 'Отмена', onPress: () => console.log('Canceled') },
                    ]
                )
            },
            editItem() {
                if (this.type === 'lesson') {
                    this.navigation.navigate('EditLesson', { editableLesson: this.data });
                } else {
                    this.navigation.navigate('EditCall', { editableCall: this.data })
                }
            },
            async deleteItem() {
                let response = await this.$plugins.f(
                    `${this.type}/${this.data.id}`,
                    'DELETE',
                    store.state.userObj.api_token
                );

                if (response.body.status) {
                    Toast.show({
                        text: `${(this.type === 'lesson') ? 'Предмет' : 'Звонок'} успешно удален`,
                        buttonText: "ОК",
                        type: "success",
                        duration: 2000
                    });
                } else {
                    Toast.show({
                        text: "Произошла непредвиденная ошибка",
                        buttonText: "Закрыть",
                        type: "danger",
                        duration: 3000
                    });
                }
            }
        }
    }
</script>

<style>
    .schedule-item-number {
        font-size: 18px;
        line-height: 40px;
    }
</style>