<template>
    <nb-content>
        <nb-spinner v-if="!ready" color="blue"/>

        <nb-list v-if="ready">
            <nb-list-item thumbnail v-for="lesson in lessons">
                <nb-left class="lesson-number-wrap">
                    <nb-text class="lesson-number">{{ Array.prototype.indexOf.call(lessons, lesson) + 1}}.</nb-text>
                </nb-left>

                <nb-body>
                    <nb-text>{{ lesson.name }}</nb-Text>
                    <nb-text note :numberOfLines="1">Аудитория: {{ lesson.audience }}</nb-Text>
                </nb-body>

                <nb-right>
                    <nb-button transparent :onPress="openMenu">
                        <nb-icon name="more"/>
                    </nb-button>
                </nb-right>
            </nb-list-item>
        </nb-list>
    </nb-content>
</template>

<script>
    import { React } from 'react';

    import { ActionSheet } from 'native-base';

    export default {
        name: 'DailySchedule',
        data() {
            return {
                lessons: [
                    { name: 'История', audience: '2.9' },
                    { name: 'Математика', audience: '1.2' },
                    { name: 'Физкультура', audience: 'Спортивный зал' },
                ],
                btnOptions: [
                    { text: "Редактировать", icon: "create", iconColor: "#3f51b5" },
                    { text: "Удалить", icon: "trash", iconColor: "#fa213b" },
                    { text: "Отмена", icon: "close", iconColor: "#3f51b5" }
                ],
                optionCancelIndex: 4,
                optionDestructiveIndex: 3,
                clicked: 0,
                ready: true
            }
        },
        mounted() {

        },
        methods: {
            openMenu() {
                ActionSheet.show(
                    {
                        options: this.btnOptions,
                        cancelButtonIndex: this.optionCancelIndex,
                        destructiveButtonIndex: this.optionDestructiveIndex,
                        title: "Выберите действие"
                    },
                    buttonIndex => {
                        this.clicked = this.btnOptions[buttonIndex];
                    }
                );
            }
        }
    }
</script>

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